论坛首页 Web前端技术论坛

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

浏览 3323 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-08-11  

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

<!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>

 

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

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics