精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
  • 让你的网站产生收益赚钱,有博客和网站的绝对不能错过
  • 将指定的流量带到你的网站,为你站增加有效的访客,为你提升业绩
  • JS函数实现鼠标指向后带图片的提示效果

    来源:不详 时间:07-10-29 点击: 点击这里收藏本文
      当鼠标移到产品缩略图上时能弹出显示大图,用JS写两个函数即可实现:

      一个函数在鼠标移到图片上调用,显示隐藏层并将图片载入到层中;

      另一个函数在鼠标移出图片上调用,清空层的内容并隐藏层。使用时需将"this.src"改为产品大图地址。

    以下是引用片段:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS函数实现鼠标指向后带图片的提示效果</title>
    <script language="javascript">
    function showPic(sUrl){
     var x,y;
     x = event.clientX;
     y = event.clientY;
     document.getElementById("Layer1").style.left = x;
     document.getElementById("Layer1").style.top = y;
     document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">";
     document.getElementById("Layer1").style.display = "block";
    }
    function hiddenPic(){
     document.getElementById("Layer1").innerHTML = "";
     document.getElementById("Layer1").style.display = "none";
    }
    </script>
    </head>
    <body>
    <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
    <img src="/images/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />
    <p></p>
    <img src="/img/200406301.jpg" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />
    </body>
    </html>


    用户评论

    广而告之