简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release： 2016-05-16 18:19:20
Original
1404 people have browsed it

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.
Related labels：
hint mouse follow
source：php.cn
Previous article：窗体滚动条出现在左侧的实例代码_文字特效 Next article：链接图片无缝(无间断)向左平滑滚动Js版代码_图象特效
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Title: Achieve white text visibility on any color background except white Using mix-blend-mode:Difference to change the text color to white works well when the back...
From 2023-11-10 16:59:01
0
1
311
Div captures mouse scroll I currently have a page of the form <divid="content"><divid="conte...
From 2023-11-01 18:57:05
0
2
268
PHP cURL method to get redirect target without following redirect The curl_getinfo function returns a large amount of metadata about the result of the HTTP ...
From 2023-10-25 08:56:01
0
1
205
Firestore method to get random documents in collection It is crucial for my application to be able to randomly select multiple documents from a c...
From 2023-10-19 11:39:22
0
2
301
How to generate a random alphanumeric string in JavaScript? What is the shortest way (within reason) to generate a random alphanumeric (uppercase, low...
From 2023-10-12 23:03:12
0
2
301
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！