简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

基于JQuery的一个简单的鼠标跟随提示效果_jquery

WBOY
Lepaskan： 2016-05-16 18:19:20
asal
1420 orang telah melayarinya

1.效果如图

　　

2.实现思路

　　1 鼠标移入标题（这里是标签）

　　　　创建一个div，div的内容为鼠标位置的文本

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

3.JQuery实现代码

复制代码 代码如下:









";
$("body").append(toolTip);
$("#tooltip").css({
"top" :e.pageY + "px",
"left" :e.pageX + "px"
});
$("#tb a").mouseout(function(){
$("#tooltip").remove();
});
$("#tb a").mousemove(function(e){
$("#tooltip").css({
"top" :(e.pageY+5) + "px",
"left" :(e.pageX+2) + "px"
});
});
//alert("Y:" + e.pageY + "X:" + e.pageX);
});
});






代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.
Label berkaitan：
提示 鼠标跟随
sumber：php.cn
Artikel sebelumnya：窗体滚动条出现在左侧的实例代码_文字特效 Artikel seterusnya：链接图片无缝(无间断)向左平滑滚动Js版代码_图象特效
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Gaya CSS tidak digunakan pada tapak Saya sedang membuat tapak web menggunakan Bootstrap5 tetapi sifat index.css tidak digunaka...
daripada 2024-04-06 17:12:23
0
1
336
Pengendalian roda tetikus NumberInput mengabaikan penapisan peristiwa fasa tangkapan Versi yang sangat pendek: Saya agak tersekat dan tidak begitu faham mengapa kod ini memang...
daripada 2024-04-05 12:21:04
0
1
1387
Tetikus item menu tertentu tidak menunjukkan submenu tersembunyi Saya mencipta beberapa kelas untuk item menu supaya saya boleh memanggilnya. .dropdownBox{...
daripada 2024-04-04 14:39:08
0
1
359
Mengikis web: Atribut href hilang - Perlu mensimulasikan klik tetikus untuk mengikis web? Untuk projek mengikis web yang menyeronokkan, saya ingin mengumpul data NHL daripada ttps:...
daripada 2024-04-04 10:32:06
0
1
3473
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！