<<  分栏效果(上下栏) | 首 页 |

  • 鼠标指向后带图片提示 - [网页效果]

    版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://kizumi.blogbus.com/logs/63808549.html

    当鼠标移到产品缩略图上时能弹出显示大图，用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>





    此方泉 发表于2010-05-19 15:00:04 | 编辑 | 分享　0