鼠标滑上去后图片放大浮出效果的js代码


复制代码 代码如下:

<script>
function GetAbsPosition(obj)
{
var curleft = 0, curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
function ShowFloatingImage(image, width, height)
{
var id = "trailimageid";
var newdiv = document.getElementById(id);
if(newdiv == null)
{
newdiv = document.createElement('div');
newdiv.setAttribute('id',id);
newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
document.body.appendChild(newdiv);
}
newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
var absPos = GetAbsPosition(image);
newdiv.style.position = "absolute";
newdiv.style.posLeft = absPos[0] - width/2;
newdiv.style.posTop = absPos[1] - height/2;
newdiv.style.display="block";
}
function HideElement(id)
{
var elem = document.getElementById(id);
elem.style.display="none";
}
</script>

例子:
复制代码 代码如下:

<body>
<img src="1.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />
</body>

经测试事件处理的不是很好。导致鼠标移开不能回到原位。



相关阅读:
asp.net结合aspnetpager使用SQL2005的存储过程分页
createElement动态创建HTML对象脚本代码
PHP 多维数组的排序问题 根据二维数组中某个项排序
精确获取样式属性 (第一部分)
XHTML语言默认的CSS样式
使用dynatrace-ajax跟踪JavaScript的性能
javascript删除Table中的一行的脚本代码
Linux 特权帐号VS普通帐号
php中获取远程客户端的真实ip地址的方法
javascript中xml操作实现代码
网页制作中表单相关特效整理
jQuery技巧大放送 学习jquery的朋友可以看下
w3c声明下可运行 兼容性比较好的js对联广告集合
Windows Vista系统优化过程中的误区
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4