码迷,mamicode.com
首页 > 其他好文 > 详细

自定义超链接文字提示效果

时间:2015-04-27 21:35:10      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快,更加美观的优点~

 1 /* 超链接文字提示 */
 2 $(function(){
 3     var x = 10;  
 4     var y = 20;
 5     $("a.tooltip").mouseover(function(e){
 6            this.myTitle = this.title;
 7         this.title = "";    
 8         var tooltip = "<div id=‘tooltip‘>"+ this.myTitle +"</div>"; //创建 div 元素
 9         $("body").append(tooltip);    //把它追加到文档中
10         $("#tooltip")
11             .css({
12                 "top": (e.pageY+y) + "px",
13                 "left": (e.pageX+x)  + "px"
14             }).show("fast");      //设置x坐标和y坐标,并且显示
15     }).mouseout(function(){        
16         this.title = this.myTitle;
17         $("#tooltip").remove();   //移除 
18     }).mousemove(function(e){
19         $("#tooltip")
20             .css({
21                 "top": (e.pageY+y) + "px",
22                 "left": (e.pageX+x)  + "px"
23             });
24     });
25 })

 

自定义超链接文字提示效果

标签:

原文地址:http://www.cnblogs.com/s-z-y/p/4461272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!