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

[锋利的JQ]-超链接提示效果

时间:2015-09-12 22:21:41      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

关键知识点:

  1、事件对象:当事件一旦被触发,事件对象便会创立。事件对象只能作用于该事件的事件处理程序。

  2、认识了mousemove事件了连续触发执行的特性。

 

代码:

  HTML:

<div class="box"><a href="javascript:;" class="link" title="超链接的标题,也是要提示的文字">超链接提示效果示例</a></div>

  

  Jquery:

    $(‘.link‘).mouseover(function(event){
            //event便是事件对象,事件处理函数一旦执行,事件对象便会创立。事件处理函数一旦结束,事件对象便会销毁。
         title = this.title;
         this.title="";
         var tipBox = ‘<div id="tipContent">‘+ title +‘</div‘;
         $(‘body‘).append(tipBox);
         $(‘#tipContent‘).css({
             ‘position‘:‘absolute‘,
             ‘left‘:event.pageX+5,
             ‘top‘:event.pageY+5
         });
    }).mouseout(function(){
        $(‘#tipContent‘).remove();  //移除提示内容元素
        this.title=title; //为链接重新设置title值,为下次指向时使用。
    }).mousemove(function(event){
        $(‘#tipContent‘).css({
            ‘left‘:event.pageX+5,
            ‘top‘:event.pageY+5
        })
    })

 

[锋利的JQ]-超链接提示效果

标签:

原文地址:http://www.cnblogs.com/HCJJ/p/4803652.html

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