首页 > 其他 > 详细

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

时间:2015-04-27 21:33:48      阅读:238      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!