首页 > 代码库 > Jquery——超链接提示效果

Jquery——超链接提示效果

2024-08-31 13:04:45   218人阅读

HTML：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>超链接提示效果</title>
 6     <script src="js/jquery-3.1.1.js"></script>
 7     <script src="js/3_3.js"></script>
 8 </head>
 9 <body>
10     <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
11     <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
12     <p><a href="#" title="这是自带提示1.">自带提示1.</a> </p>
13     <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
14 </body>
15 </html>

JS：

 1 /**
 2  * Created by Administrator on 2017/1/10.
 3  */
 4 $(function () {
 5     var x = 10;
 6     var y = 20;
 7     $("a.tooltip").mouseover(function (e) {
 8 
 9         this.myTitle = this.title;
10         this.title = "";
11         //创建div元素
12         var $tooltip = $("<div id=‘tooltip‘>"+this.myTitle+"</div>");
13         $("body").append($tooltip);
14         //设置x，y坐标，并显示
15         $("#tooltip").css({"position":"absolute","top":(e.pageY+y)+"px",
16             "left":(e.pageX+x)+"px"}).show("fast");
17 
18     }).mouseout(function () {
19         this.title = this.myTitle;
20         $("#tooltip").remove();
21 
22     }).mousemove(function (e) {      //提示效果随着鼠标移动而移动
23         $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
24     });
25 })

效果：

技术分享

Jquery——超链接提示效果


联系
我们