Js 实现图片放大功能

来源：互联网发布：linux动态打印日志编辑：程序博客网时间：2024/05/01 11:04

如果要实现图片的放大效果，如当鼠标移动到一个图片上的时候，该图片的一个大图在旁边展示出来，要实现这个效果，就要获取到该图片在页面上的坐标位置。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";

0 0