鼠标滑上去后图片放大浮出效果的js代码
更新时间：2011年05月28日 00:14:46 作者：
用javascript做了一个鼠标滑上去后图片放大浮出的效果，大家指正一下。
复制代码 代码如下:
<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>
经测试事件处理的不是很好。导致鼠标移开不能回到原位。
相关文章
非常不错nipic使用的图片缩放实现代码。2009-05-05
多图幻灯Pixelate马赛克效果...2006-12-12
有时候我们的图片上传等功能，需要验证客户端的图片大小，比较只能上传小于100K的图片，这里客户端先简单的验证下。2010-04-04
兼容ie、firefox的图片自动缩放的css跟js代码分享
这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下2012-01-01
SuperSlide2,实现图片滚动，感觉很强大，这里只是简单的演示其中一种类型，想看更多类型的话，可以去http://www.superslide2.com 查看，2014-06-06
用javascript制作放大镜放大图片...2006-07-07
[蓝色]自适应图片大小的弹出窗口...2006-07-07
JS实现全景图效果360度旋转...2007-01-01
ie8.0下显示本地图片的js实现代码，IE8.0 显示本地图片 img.src=本地图片路径 是无效，只能通过div来完成2012-03-03
JavaScript判断图片是否能够加载,失败则替换默认图片
JavaScript智能判断图片是否能够正确加载，若加载失败则用默认图片替换，这是个比较实用的功能，不少网站都可见到这种功能.2010-10-10
最新评论