Js 实现图片放大功能

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





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值