Js 实现图片放大功能

最新推荐文章于 2024-12-05 11:29:32 发布

原创最新推荐文章于 2024-12-05 11:29:32 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

JS（JavaScript）专栏收录该内容

35 篇文章

订阅专栏

如果要实现图片的放大效果，如当鼠标移动到一个图片上的时候，该图片的一个大图在旁边展示出来，要实现这个效果，就要获取到该图片在页面上的坐标位置。Firefox 的最新版本提供了这个功能，很easy，只要用该图片对象的 x、y 属性就可以直接获取到图片在页面的坐标位置，但是这个属性在 IE 、360 里还不支持，但可以通过 offsetParent.offsetLeft 和 offsetParent.offsetTop 来实现，下面就来说一说具体的实现示例的方法。

1. Firefox、chrome、IE 、360 浏览器

var fimg = document.getElementById(fimgId);
var bigImg = "<img src='"+fimg.src+"' style=' width:165px; height:130px; '/>";
var lt = fimg.offsetParent.offsetLeft+160+"px";
var tp = fimg.offsetParent.offsetTop-20+"px";
document.getElementById("bigImg").style.top = tp; 
document.getElementById("bigImg").style.left = lt;
document.getElementById("bigImg").innerHTML = bigImg;
document.getElementById("bigImg").style.display="block";

2. Firefox 、chrome 支持，IE、360不支持

var fimg = document.getElementById(fimgId);
var bigImg = "<img src='"+fimg.src+"' style=' width:165px; height:130px; '/>";
//用 img 对象 的 x、y 属性来直接获取图片元素的坐标
document.getElementById("bigImg").style = "position:absolute; width:180px; height:180px; top:"+(fimg.y-50)+"px; left:"+(fimg.x+60)+"px;";

//或是用下面注释中的方法也ok
//document.getElementById("bigImg").x = fimg.x+60;
//document.getElementById("bigImg").y = fimg.y-50;
document.getElementById("bigImg").innerHTML = bigImg;
document.getElementById("bigImg").style.display="block";