Bài viết được sự cho phép của tác giả Phạm Công Sơn
Đây là plugin giả lập gõ văn bản, rất phù hợp với những web cần hiển thị text dạng ngắn hay slogan hiện ra từ từ bằng hiệu ứng typing. Các bạn có thể tải plugin này tại đây
1. Dưới đây là demo
2. Hướng dẫn cài đặt
<scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="t.min.js"></script>
3. Hướng dẫn sử dụng
Nội dung code Html
<divdata-form="typing"class="hide"><mark><a>Chào mừng các bạn đã đến với blog son20.com của mình</a></mark><br/>Hãy chờ mình một chút <del>Khoảng</del> tầm 2 giây thôi rồi thì mình giới thiệu nhé..<ins>2</ins><br/><strong>Đây là Plugin giả lập Typing rất thú vị.</strong><br/><del></del> để thực hiện giả lập xóa text *<ins>2</ins><br/><ints>{numeric}</ints> để thực hiện delay một khoảng thời gian (tính bằng giây)*<ins>2</ins><br/><kbd></kbd> để tối ưu việc gõ nhầm *<ins>2</ins><br/>Chúc <delstyle="color:red;border-bottom:1px dashed red;">mọi người</del>các bạn sử dụng plugin này vào những trường hợp hữu ích.Chờ xíu để chạy lại nhé <ints>2</ints></div>
Nội dung code javascript
varrun =function(){$("[data-form=typing]").removeClass("hide").t({speed: 50,pause_on_tab_switch:true,pause_on_click:true,beep:true,fin:function() { run(); }});}run();
| Tham số | Giá trị | Ghi chú |
|---|---|---|
| speed | numeric | Tốc độ giả lập gõ văn bản, càng lớn thì giả lập tốc độ gõ càng chậm |
| pause_on_tab_switch | boolean | Nếu là true thì sẽ dừng giả lập gõ khi trình duyệt mất focus |
| pause_on_click | boolean | Nếu là true thì sẽ dừng giả lập gõ khi click vào hiển thị |
| beep | boolean | Nếu là true thì sẽ có âm thanh gõ khi giả lập typing |
| fin | function | sự kiện khi kết thúc giả lập |
Chúc các bạn sử dụng plugin vào những lúc thích hợp
Sơn 20
Bài viết gốc được đăng tải tại sonpc20.com
Có thể bạn quan tâm:
- Cách sử dụng các plugins jQuery trong VueJS
- Top các Plugin jQuery tạo Lightbox free đẹp nhất cho website
- Kết nối RabbitMQ sử dụng Web STOMP Plugin
Xem thêm Tuyển dụng JQuery hấp dẫn trên TopDev
