php 放大镜代码,JavaScript实现简单放大镜效果代码

本文主要和大家介绍了原生JavaScript实现的简单放大镜效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家。

原理：其实所谓的放大就是准备两张一样的图片，除大小不一样。鼠标移动到不同位置，将会显示大图片对应的图片内容。

完整代码：

放大镜效果

var filter = document.getElementById('filter');

var smallImg = document.getElementById('smallImg');

var bigImg = document.getElementById('bigImg');

var wrap = document.getElementById('wrap');

var largeImgs = bigImg.getElementsByTagName('img')[0];

smallImg.onmouseover = function(){

bigImg.style.display = "inline-block";

filter.style.display = "inline-block";

}

smallImg.onmousemove = function(event){

var event = event || window.event;

var mouseleft = event.clientX - wrap.offsetLeft;

var mousetop = event.clientY - wrap.offsetTop;

var left = mouseleftsmallImg.offsetWidth*3/4?smallImg.offsetWidth/2:(mouseleft - filter.offsetWidth/2);

var top = mousetopsmallImg.offsetHeight*3/4?smallImg.offsetHeight/2:(mousetop - filter.offsetWidth/2);

filter.style.left = left + "px";

filter.style.top = top +"px";

largeImgs.style.left = "-" +　left*bigImg.offsetWidth/smallImg.offsetWidth + "px";

largeImgs.style.top = "-" +　top*bigImg.offsetHeight/smallImg.offsetHeight + "px";

}

smallImg.onmouseout = function(){

bigImg.style.display = "none";

filter.style.display = "none";

}

运行效果：

相关推荐：