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

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

 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 })

 

posted @ 2015-04-27 20:25  如梦令szy  阅读(389)  评论(0)  编辑  收藏  举报