当前位置:首页 > 网页特效 > 文字特效 >

Js跟随鼠标的链接文字提示框

时间:2013-12-26 09:00 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可。你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置。
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>跟随鼠标的文字提示框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body{font:12px/1.8 arial;}
    a,a:visited{color:#3366cc;text-decoration:none;}
    a:hover{color:#f60;text-decoration:underline;}
    .tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}
    img{border:none;}
    </style>
    <script type="text/javascript">
      var tip={$:function(ele){
      if(typeof(ele)=="object")
        return ele;
      else if(typeof(ele)=="string"||typeof(ele)=="number")
        return document.getElementById(ele.toString());
        return null;
      },
      mousePos:function(e){
        var x,y;
        var e = e||window.event;
        return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
    y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
      },
      start:function(obj){
        var self = this;
        var t = self.$("mjs:tip");
        obj.onmousemove=function(e){
          var mouse = self.mousePos(e);
          t.style.left = mouse.x + 10 + 'px';
          t.style.top = mouse.y + 10 + 'px';
          t.innerHTML = obj.getAttribute("tips");
          t.style.display = '';
        };
        obj.onmouseout=function(){
          t.style.display = 'none';
        };
      }
      }
    </script>
    </head>
    <body>
    <ol>
    <li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="2013年12月14日,嫦娥3号卫星登上月球,激动人心的一切终于到来了……">中国嫦娥飞天的一些感想</a></li>
    <li><a href="#" target="_blank" onmouseover="tip.start(this)" tips="中国未来一定是世界上最强大的国家,你相信么?">中国是世界上最强大的国家</a></li>
    </ol>
    <div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>
    </body>
    </html>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-wenzi/6530.html

文字特效下载排行

最新文章