zoukankan      html  css  js  c++  java
  • [锋利的JQ]-超链接提示效果

    关键知识点:

      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
            })
        })
  • 相关阅读:
    Arduino学习笔记10
    Arduino学习笔记07
    Arduino学习笔记6
    Arduino学习笔记5
    Arduino学习笔记4
    Arduino学习笔记3
    linux下库文件的编程
    学习编程语言究竟学什么
    Arduino学习笔记2---数字温度计
    Arduino学习笔记0---开发板的了解
  • 原文地址:https://www.cnblogs.com/HCJJ/p/4803652.html
Copyright © 2011-2022 走看看