js笔记：一个提示跟随鼠标的效果

16th 7月 2008, 03:21 下午

html代码部分：

  1. <body>
  2. <div id="picTips"></div>
  3.     <span rel="show" src="http://www.baidu.com/img/baidu.gif">百度</span>
  4.     <br />
  5.     <br />
  6.     <br />
  7.     <br />
  8.     <br />
  9.     <br />
  10.     <br />
  11.     <span rel="show" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">google</span>
  12.     <br />
  13.     <br />
  14.     <br />
  15.     <br />
  16.     <br />
  17.     <br />
  18.     <br />
  19.     <span>这个没有提示</span>
  20. </body>

css代码部分：

  1. body{width:1000px;height:1000px;border:1px solid #f00;margin:0 auto;}
  2. #picTips{display:none;position:absolute;border:1px solid #000;}
  3. span{cursor:pointer;text-decoration:underline;}

javascript部分:

  1. function showPic(){
  2.             var showTexts = document.getElementsByTagName("span");
  3.             var picDiv = document.getElementById("picTips");
  4.             for(var i = 0;i < showTexts.length;i++){
  5.                 var showText = showTexts[i];
  6.                 var showTextRel = showText.getAttribute("rel");
  7.                 if(showTextRel == "show"){
  8.                     showText.onmouseover = function(event){
  9.                         if(!event){
  10.                             event = window.event;
  11.                         }                           
  12.                         var el = event.target || event.srcElement;
  13.                         var picSrc = el.getAttribute("src");
  14.                         var x = event.clientX + document.documentElement.scrollLeft + 5 + "px";
  15.                         var y = event.clientY + document.documentElement.scrollTop + 5 + "px";
  16.                         picDiv.style.display = "block";
  17.                         picDiv.style.top = y;
  18.                         picDiv.style.left = x;
  19.                         picDiv.innerHTML = "<img src='' />";
  20.                         var pic = picDiv.getElementsByTagName("img")[0];
  21.                         pic.setAttribute("src",picSrc);
  22.                     }
  23.                     showText.onmouseout = function(){
  24.                         picDiv.style.display = "none";
  25.                     }
  26.                 }
  27.             }
  28.         }
  29.         window.onload = function(){
  30.             showPic();
  31.         }

查看演示

分类： js笔记  |  1 条评论