原生js放大镜原理一看就懂非常简单

首先你需要照一张清晰度较高的，比较大的图片

html布局：

复制过去就行了

<body style="height:2000px;"><!--这里写height,是为了测试带滚动条时的BUG-->
<div class="wrap" id="wrap"><div id="small"><img src="img/1.jpg" alt=""><div id="move"></div></div><div id="big"><img src="img/1.jpg" alt=""></div>
</div>
</body>

style样式代码：

复制过去就行了

*{margin:0;padding:0;
}
.wrap{width: 600px;height: 360px;margin:100px;
}
#small,#big{width: 298px;height: 358px;border:1px solid #ccc;float:left;
}
#small{text-align:center;position: relative;
}
#small img{width: 285px;height:346px;margin-top:6px;
}
#move{width: 150px;height: 150px;/*background:rgba(255,255,255,.5);*/background:#fff;opacity:.5;filter:alpha(opacity=50);position: absolute;top: 0;left: 0;cursor:move;display:none;
}
#big{position:relative;overflow:hidden;display:block;
}
#big img{position:absolute;top:0;left:0;
}

核心js代码：

//1.
var oWrap = document.getElementById('wrap');
var smallDiv = document.getElementById('small');
var move = document.getElementById('move');
var bigDiv = document.getElementById('big');//2.
smallDiv.onmousemove = function(ev) {var oEvent = ev || event;var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;var iScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;var disX = oEvent.clientX + iScrollLeft - move.offsetWidth / 2 - oWrap.offsetLeft;var disY = oEvent.clientY + iScrollTop - move.offsetHeight / 2 - oWrap.offsetTop;
//  console.log(oWrap.offsetLeft)if (disX < 0) {disX = 0;} else if (disX > smallDiv.offsetWidth - move.offsetWidth) {disX = smallDiv.offsetWidth - move.offsetWidth;};if (disY < 0) {disY = 0;} else if (disY > smallDiv.offsetHeight - move.offsetHeight) {disY = smallDiv.offsetHeight - move.offsetHeight;};move.style.left = disX + 'px';move.style.top = disY + 'px';/*算出move块在X轴的移动距离与总的移动距离的比例*/var _pageX = disX / (smallDiv.offsetWidth - move.offsetWidth);console.log(_pageX)   /*这是一个0~1之间的数*//*算出move块在Y轴的移动距离与总的移动距离的比例*/var _pageY = disY / (smallDiv.offsetHeight - move.offsetHeight);/*求出大图片在X轴的移动距离*/var mX = _pageX * (bigDiv.children[0].offsetWidth - bigDiv.offsetWidth);/*求出大图片在Y轴的移动距离*/var mY = _pageY * (bigDiv.children[0].offsetHeight - bigDiv.offsetHeight);bigDiv.children[0].style.left = -mX + 'px';bigDiv.children[0].style.top = -mY + 'px';
};//3.
smallDiv.onmouseover = function(ev) {bigDiv.style.display = 'block';move.style.display = 'block';smallDiv.onmousemove(); //兼容IE
};
smallDiv.onmouseout = function() {bigDiv.style.display = 'none';move.style.display = 'none';
};

原生js放大镜原理一看就懂非常简单相关推荐

JQuary（从原生js到jq，就发现jq好简单）
1.jQuery介绍 jQuery是一个优秀的JavaScript库,以最少的代码实现更多的功能特点: 1.强大的选择器的功能 $("selector") 2.语法简介 $(&q ...
使用原生js实现按钮的全选功能，简单清晰
1.相信有很多朋友在学习前端原生JS的时候,都有遇到过实现全选按钮的需求吧.废话不多说直接上代码吧! <!DOCTYPE html> <html lang="en" ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
原生Js放大镜实例(附图附讲解可直接复制研究使用，小白福利)
(个人理解的画图在最后,审美差了点请见谅,) css *{margin: 0;padding: 0;}body>div{width: 1200px;height: 600px;margin: 1 ...
原生JS灵魂之问——你真的懂这些JS吗？
最近在看ES6(可能是初到公司的缘故,处于振奋与繁忙的事带来的无力之中...不过还是坚持认真阅读了<深入浅出ES6>,确实是本好书),里面一些内容会时不时让人有"恍然大悟&quo ...
【蓝桥杯】交换瓶子（临阵磨枪，不快也光一看就懂的简单图论）
题目: 有N个瓶子,编号 1 ~ N,放在架子上.比如有5个瓶子: 2 1 3 5 4要求每次拿起2个瓶子,交换它们的位置. 经过若干次后,使得瓶子的序号为: 1 2 3 4 5对于这么简单的情况,显 ...
快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式.JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数 ...
html flappybird小游戏代码,原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 css样式 #game { width: 800px; height: 600px; border: 1px s ...
js map遍历修改对象里面的值_求职季之你必须要懂的原生JS(上)
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境 ...

原生js放大镜原理一看就懂非常简单

原生js放大镜原理一看就懂非常简单相关推荐

最新文章

热门文章

原生js放大镜 原理 一看就懂 非常简单

原生js放大镜 原理 一看就懂 非常简单相关推荐

最新文章

热门文章

原生js放大镜原理一看就懂非常简单

原生js放大镜原理一看就懂非常简单相关推荐