首页 > 代码库 > 支持鼠标跟随的JS+CSS链接提示框

支持鼠标跟随的JS+CSS链接提示框

2024-07-16 23:27:46   226人阅读

觉得纯css的tips限制有点大，而且好像兼容性也不好，这是我发现的一个Js+CSS的链接提示框效果，还会跟随鼠标而移动，而且兼容性也不错，代码与大家分享：前端分享

.代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>跟随鼠标的文字提示框</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <style type="text/css">  
  7. body{font:12px/1.8 arial;}  
  8. a,a:visited{color:#3366cc;text-decoration:none;}  
  9. a:hover{color:#f60;text-decoration:underline;}  
  10. .tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}  
  11. img{border:none;}  
  12. </style>  
  13. <script type="text/javascript">  
  14.   var tip={$:function(ele){  
  15.   if(typeof(ele)=="object")  
  16.     return ele;  
  17.   else if(typeof(ele)=="string"||typeof(ele)=="number")  
  18.     return document.getElementById(ele.toString());  
  19.     return null;  
  20.   },  
  21.   mousePos:function(e){  
  22.     var x,y;  
  23.     var e = e||window.event;  
  24.     return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,  
  25. y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};  
  26.   },  
  27.   start:function(obj){  
  28.     var self = this;  
  29.     var t = self.$("mjs:tip");  
  30.     obj.onmousemove=function(e){  
  31.       var mouse = self.mousePos(e);  
  32.       t.style.left = mouse.x + 10 + ‘px‘;  
  33.       t.style.top = mouse.y + 10 + ‘px‘;  
  34.       t.innerHTML = obj.getAttribute("tips");  
  35.       t.style.display = ‘‘;  
  36.     };  
  37.     obj.onmouseout=function(){  
  38.       t.style.display = ‘none‘;  
  39.     };  
  40.   }  
  41.   }  
  42. </script>  
  43. </head>  
  44. <body>  
  45. <ol>  
  46. <li><a href=http://www.mamicode.com/"#" target="_blank" onmouseover="tip.start(this)" tips="2013年12月14日，嫦娥3号卫星登上月球，激动人心的一切终于到来了……">中国嫦娥飞天的一些感想</a></li>  
  47. <li><a href=http://www.mamicode.com/"#" target="_blank" onmouseover="tip.start(this)" tips="中国未来一定是世界上最强大的国家，你相信么？">中国是世界上最强大的国家</a></li>  
  48. </ol>  
  49. <div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>  
  50. </body>  
  51. </html>  

 

也就是为每一个a标签添加一个tips标签，用JS控制显示的，所以在你的页面添加本链接提示前，请复制代码内的JavaScript代码到你的页面中，然后为需要提示的链接添加Tips标签。前端框架分享


联系
我们