复制代码 代码如下:
<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>
经测试事件处理的不是很好。导致鼠标移开不能回到原位。
您可能感兴趣的文章:
- JS简单的图片放大缩小的两种方法
- js实现单击图片放大图片的方法
- JS实现鼠标移动到缩略图显示大图的图片放大效果
- JavaScript图片放大镜效果代码[代码比较简单]
- 奇妙的Javascript图片放大镜
- javascript实现图片跟随鼠标移动效果的方法
- js+html+css实现鼠标移动div实例
- JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
- js实现图片放大并跟随鼠标移动特效
