JS实现放大镜特效原理解析

实现特效所需的技术点：

onmouseover：鼠标移动到指定的对象上发生；
onmouseout：鼠标移出指定的对象时发生；
onmouseover：鼠标在移动时发生；
offsetLeft：获取当前元素距父元素左侧的值；
offsetTop：获取当前元素距父元素顶部的值
offsetWidth：获取当前元素的宽度；
offsetHeight：获取当前元素的高度；
event.clientX：获取浏览器（窗口）水平坐标；
event.clientY：获取浏览器（窗口）垂直坐标；

style.css 文件：

* {margin: 0;padding: 0;
}#demo {width: 313px;height: 300px;border: 1px solid #ccc;margin: 60px;position: relative;display: flex;align-items: center;
}#small-box {position: relative;z-index: 1;
}#magnifier {display: none;width: 140px;height: 110px;position: absolute;background-color: #f7f7f7;border: 1px solid #cccccc;filter: alpha(opacity=60);opacity: 0.6;cursor: move;
}#big-box {display: none;position: absolute;top: 0;left: 330px;width: 315px;height: 300px;overflow: hidden;border: 1px solid #cccccc;z-index: 1;
}#big-box img {position: absolute;z-index: 5;
}

demo.html文件：

<div id="demo"><div id="small-box"><div id="magnifier"></div><img src="data:images/small.jpg"></div><div id="big-box"><img src="data:images/big.jpg"></div>
</div>

javascript文件：

<script>window.onload = function () {// 获取各个元素var demo = document.getElementById('demo');var smallBox = document.getElementById('small-box');var magnifier = document.getElementById('magnifier');var bigBox = document.getElementById('big-box');var bigImg = bigBox.getElementsByTagName('img')[0];// 鼠标移动到小图片上smallBox.onmouseover = function () {magnifier.style.display = "block";bigBox.style.display = "block";};// 鼠标移出小图片smallBox.onmouseout = function () {magnifier.style.display = 'none';bigBox.style.display = 'none';};// 鼠标在图片上移动smallBox.onmousemove = function (event) {// 获取放大镜左边离图片框的距离var left = event.clientX - demo.offsetLeft - smallBox.offsetLeft - magnifier.offsetWidth / 2;// 获取放大镜上边离图片框的距离var top = event.clientY - demo.offsetTop - smallBox.offsetTop - magnifier.offsetHeight / 2;// 设置水平方向放大镜离图片框最小距离为0，最大距离为：图片框宽度 - 放大镜宽度，这样放大镜就不会超出图片框了if (left < 0) {left = 0;} else if (left > (smallBox.offsetWidth - magnifier.offsetWidth)) {left = smallBox.offsetWidth - magnifier.offsetWidth;}// 垂直方向同理if (top < 0) {top = 0;} else if (top > (smallBox.offsetHeight - magnifier.offsetHeight)) {top = smallBox.offsetHeight - magnifier.offsetHeight;}// 设置放大镜的left\top值，让放大镜跟随鼠标移动magnifier.style.left = left + 'px';magnifier.style.top = top + 'px';// 放大镜移动距离的百分比 = 鼠标移动的距离（或放大镜移动的距离） / 放大镜可移动的最大范围var percentX = left / (smallBox.offsetWidth - magnifier.offsetWidth);var percentY = top / (smallBox.offsetHeight - magnifier.offsetHeight);// 根据放大镜移动距离的百分比 = 右边大图片移动距离的百分比,可以得到以下公式，并计算出大图片的left和top值bigImg.style.left = -percentX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';bigImg.style.top = -percentY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';}}
</script>

代码效果：

THE END !

JS实现放大镜特效原理解析相关推荐

案例：用JS实现放大镜特效
案例:用JS实现放大镜特效案例:用JS实现放大镜特效
用JS实现放大镜特效
先来张效果图: 这个特效是跟着慕课网上的视频学的,视频链接如下:https://www.imooc.com/learn/32 源码和技术点已经上传到附件,有需要的可以查看.下载. 下面直接上代码(PS ...
vue.js响应式原理解析与实现
从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新 ...
php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创 - phpStudy...
原理解析:第一步:使用dom创建应用:1.提高代码的复用,减少代码量:2.添加一个javascript控制器和 session可以实现动态改变页面样式:3.由于是页面是从上到下依次加载文件的,并且边 ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
JS中的new操作符原理解析
JS中的new操作符原理解析 new操作符做了什么参考推荐阅读你越是认真生活,你的生活就会越美好--弗兰克·劳埃德·莱特 <人生果实>经典语录 new操作符做了什么 var Pers ...
仿京东淘宝放大镜特效 jqzoom.js
效果图如下: HTML 文本源码: 1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <met ...
Unity中实现溶解(Dissolve)特效及其原理解析
Unity中实现溶解(Dissolve)特效及其原理解析今天我们分享一个Unity中非常常见的特效: 溶解. 下面先来看看效果. 大家可能和我一样, 在不了解实现方式的时候, 会觉得这个效果很神奇, ...
spring ioc di 原理解析
spring ioc原理(看完后大家可以自己写一个spring) 控制反转/依赖注入其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.Java程序员都知道:java程序中 ...
秋色园QBlog技术原理解析：性能优化篇：用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...

JS实现放大镜特效原理解析

JS实现放大镜特效原理解析相关推荐

最新文章

热门文章