19-06
22

好玩的鼠标指向后带图片的提示效果(快40了还在记这个是不是有点可悲)

当鼠标移到产品缩略图上时能弹出显示大图,用JS写两个函数即可实现:一个函数在鼠标移到图片上调用,显示隐藏层并将图片载入到层中;另一个函数在鼠标移出图片上调用,清空层的内容并隐藏层。使用时需将"this.src"改为产品大图地址。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>好玩的鼠标指向后带图片的提示效果webjx.com</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="https://img3.hackhome.com/images/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />
<p></p>
<img src="/img/2007-10-30/2007103010145238617.jpg" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />
</body>
</html>


文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 195
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭