Hướng dẫn và sử dụng jquery plugin typing để giả hiệu ứng gõ văn bản
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
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"t.min.js"
></
script
>
3. Hướng dẫn sử dụng
Nội dung code Html
<
div
data-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 <
del
style
=
"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
var
run =
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
- B BenQ RD Series – Dòng Màn Hình Lập Trình 4k+ Đầu Tiên Trên Thế Giới
- i iOS 18 có gì mới? Có nên cập nhật iOS 18 cho iPhone của bạn?
- G Gamma AI là gì? Cách tạo slide chuyên nghiệp chỉ trong vài phút
- P Power BI là gì? Vì sao doanh nghiệp nên sử dụng PBI?
- K KICC HCMC x TOPDEV – Bước đệm nâng tầm sự nghiệp cho nhân tài IT Việt Nam
- T Trello là gì? Cách sử dụng Trello để quản lý công việc
- T TOP 10 SỰ KIỆN CÔNG NGHỆ THƯỜNG NIÊN KHÔNG NÊN BỎ LỠ
- T Tìm hiểu Laptop AI – So sánh Laptop AI với Laptop thường
- M MySQL vs MS SQL Server: Phân biệt hai RDBMS phổ biến nhất
- S SearchGPT là gì? Công cụ tìm kiếm mới có thể đánh bại Google?