js放大镜效果

合集下载

js放大镜的实现原理

js放大镜的实现原理JavaScript（JS）放大镜是一种常见的网页功能，它可以让用户在网页上放大某个区域的内容，以更好地查看和分析细节。

这个功能的实现原理并不复杂，它主要依赖于一些基本的网页开发技术和 JS 的能力。

先来看一下放大镜的样子和功能。

一个简单的放大镜可以包括两个主要的部分：一个镜头和一个放大区域。

在网页上，展示需要放大的图像，并在镜头与放大区域应用相应的 CSS 样式来调整它们的大小和位置。

当用户通过鼠标滚轮或拖动的方式移动镜头时，放大区域会即时显示当前镜头下的图像，并以设定的倍数进行放大。

这个功能的实现主要有以下几个步骤：步骤一：绑定事件监听器该功能的实施需要跟网页上的用户动作产生响应，最常用的是绑定一个事件监听器来捕捉用户在镜头区域内的鼠标拖动动作。

当用户把鼠标放在镜头区域上并开始拖动时，这个事件监听器就会被触发。

步骤二：计算镜头和放大区域的位置镜头和放大区域的位置是根据用户鼠标拖动的位置计算得出的。

JS 中提供了很多测量元素位置的方法，例如`getElementById`、`getElementsByClassName` 和`querySelector`、`querySelectorAll`。

获取到元素之后还可以通过 `getBoundingClientRect` 来获取其相对于视口的位置。

在这个步骤中，我们可以根据用户鼠标在镜头上的动作计算镜头和放大区域的位置和大小。

步骤三：渲染放大区域一旦计算出了镜头和放大区域的位置，接下来就需要在页面上显示出对应的样式。

这可以通过使用 CSS 样式控制元素的大小、位置和转换来实现。

当用户拖动镜头时，JS 会不断重新计算这些位置和样式，以实现放大镜的动态效果。

步骤四：计算图像放大比例为了保证放大区域显示的图像充满以及不失真，我们需要在计算放大区域样式时，考虑到放大倍率。

这个倍率值可以是一个固定的数字，也可以由用户自行设置。

步骤五：更新放大区域的图像当用户拖动镜头时，放大区域需要实时更新显示对应区域的图像内容。

JavaScript仿京东放大镜特效

JavaScript仿京东放⼤镜特效本⽂实例为⼤家分享了JavaScript仿京东放⼤镜的具体代码，供⼤家参考，具体内容如下功能需求：1、分为三个模块2、⿏标经过⼩图⽚盒⼦，黄⾊的遮挡层和⼤图⽚盒⼦显⽰，离开隐藏两个盒⼦功能3、黄⾊的遮挡层跟随着⿏标移动4、移动黄⾊遮挡层，⼤图⽚跟随着移动⼤图⽚移动距离=（遮挡层移动距离*⼤图⽚最⼤移动距离）/ 遮挡层最⼤移动距离<style>body,div {margin: 0;padding: 0;}.product {position: relative;width: 400px;height: 400px;margin: 50px 0 0 20px;border: 1px solid #000;}.preview_img img {width: 300px;height: 300px;margin: 50px 50px;}.mask {position: absolute;display: none;top: 20px;left: 30px;width: 80px;height: 80px;background-color: yellow;opacity: 0.5;cursor: move;}.big {position: absolute;display: none;left: 410px;top: 0;width: 500px;height: 500px;z-index: 999;overflow: hidden;}.big img {position: absolute;top: 0;left: 0;width: 400px;height: 400px;}</style><script src="detail.js"></script></head><body><div class="product"><div class="preview_img"><img src="images/xs.jpg" alt="" /><div class="mask"></div><div class="big"><img src="images/xs.jpg" alt="" class="bigImg" /></div></div></div></body>JS页⾯//页⾯预加载window.addEventListener("load", function () {var preview_img = document.querySelector(".preview_img");var mask = document.querySelector(".mask");var big = document.querySelector(".big");//1.⿏标经过 preview_img 就显⽰和隐藏 mask 遮挡层和 big ⼤盒⼦preview_img.addEventListener("mouseover", function () {mask.style.display = "block";big.style.display = "block";});preview_img.addEventListener("mouseout", function () {mask.style.display = "none";big.style.display = "none";});//把⿏标坐标给遮挡层是不合适的，因为遮挡层坐标以⽗盒⼦为准preview_img.addEventListener("mousemove", function (e) {//（1）先计算出⿏标在盒⼦内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;//（2）减去盒⼦⾼度宽度的⼀半//（3）mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;//(4)如果坐标⼩于0 就让他停在 0 的位置(即超出盒⼦范围就停⽌)var egdeX = preview_img.offsetWidth - mask.offsetWidth;var egdeY = preview_img.offsetHeight - mask.offsetHeight;if (maskX <= 0) {maskX = 0;} else if (maskX >= egdeX) {maskX = egdeX;}if (maskY <= 0) {maskY = 0;} else if (maskY >= egdeY) {maskY = egdeY;}mask.style.left = maskX + "px";mask.style.top = maskY + "px";//⼤图⽚的移动距离 = 遮挡层移动距离*⼤图⽚最⼤移动距离 / 遮挡层的最⼤移动距离var bigImg = document.querySelector(".bigImg");//⼤图⽚最⼤移动距离var bigMax = bigImg.offsetWidth - big.offsetWidth;//⼤图⽚的移动距离 x yvar bigX = (maskX * bigMax) / egdeX;var bigY = (maskY * bigMax) / egdeY;bigImg.style.left = -bigX + "px";bigImg.style.top = -bigY + "px";});});以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js实现简单的放大镜效果

js实现简单的放⼤镜效果本⽂实例为⼤家分享了js实现简单放⼤镜效果的具体代码，供⼤家参考，具体内容如下效果效果，⿏标在原图⽚移动，黄⾊⼩盒⼦跟随⿏标移动，黄⾊⼩盒⼦盖住的部分，在显⽰区显⽰效果图如下：核⼼思路1.⿏标放置在图⽚上，显⽰区出现，⿏标离开⼩盒⼦，显⽰区消失2.⿏标在图⽚上移动时，⼩盒⼦跟随⿏标移动，且⿏标在黄⾊⼩盒⼦中间位置3.⼩盒⼦给判断，让其不能超出图⽚区域4.⼩盒在图⽚上移动多少，显⽰区域要移动同⽐例的距离5.当显⽰区⼤⼩发⽣改变，或显⽰区内容增⼤变⼩，原来图⽚上的黄⾊⼩盒⼦随之改变操作1.先把需要⽤到元素获取过来// 获取页⾯上我们需要的元素var box1=document.querySelector('.box1')var yellow=document.querySelector('.yellow')var box2=document.querySelector('#rightbox')var screen=rightbox.children[0]2.⿏标放置到图⽚，显⽰区域出现，离开则消失// ⿏标进⼊和离开图⽚box1.onmouseenter=function(){box2.style.display='block'}box1.onmouseleave=function(){box2.style.display='none'}利⽤⿏标的进⼊和离开事件就可以做到，分别设置出现和不出现就好了3.⿏标移动，⼩盒⼦跟随移动，且⿏标在黄⾊⼩盒⼦中间box1.onmousemove=function(e){// 算出⼩盒⼦在图⽚时，⾃⾝的中⼼点var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2// 给黄⾊⼩盒⼦赋值，让黄⾊⼩盒⼦跟随⿏标移动yellow.style.left=x+'px'yellow.style.top=y+'px'}1.使⽤事件，⿏标在图⽚上每⼀栋⼀下就触发，做到随时刷新2.计算出⼩盒⼦在图⽚时，⾃⾝的中⼼点公式：（⽤⿏标在页⾯的位置，减去，图⽚的偏移距离，减去⾃⾝的⼀半）这⾥减去⼀半是保证⿏标在黄⾊盒⼦位置始终保持居中4.⼩盒⼦给判断条件，让黄⾊⼩盒⼦不能超出图⽚区域// ⿏标在图⽚上移动触发事件box1.onmousemove=function(e){// 算出⼩盒⼦在图⽚的中⼼点var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2// --------------------------------------------------------------------------------// 新增部分// 判断⼩盒⼦是否超出img范围，使黄⾊⼩盒⼦不能超出img范围if(x<0){// 此时的0不是图⽚的左侧，⽽是⼩盒⼦在最左边时，⼩盒⼦的中⼼点x=0}else if(x>box1.offsetWidth-yellow.offsetWidth){// ⼩盒⼦的X轴中⼼点⼤于图⽚盒⼦的宽度减去⾃⾝宽度时，说明超出，则始终等于图⽚盒⼦的宽度减去⾃⾝宽度x=box1.offsetWidth-yellow.offsetWidth}// 同上if(y<0){y=0}else if(y>box1.offsetHeight-yellow.offsetHeight){y=box1.offsetHeight-yellow.offsetHeight}// ---------------------------------------------------------------------------------// 给黄⾊⼩盒⼦赋值，让黄⾊⼩盒⼦跟随⿏标移动yellow.style.left=x+'px'yellow.style.top=y+'px'1.判断⼩盒⼦的左边是不是超出图⽚部分，给的if（x<0）此时的0，还是以中⼼点来计算的2.判断右边 x>box1.offsetWidth-yellow.offsetWidth（是否⼤于图⽚区域宽度减去⼩盒⼦宽度）为什么是⼩盒⼦宽度，判定的是⼩盒⼦中⼼点，且0的位置是⼩盒⼦的中⼼点，已经减去过⼀半的⼩盒⼦，所以右边减去的就是⼩盒的⼀半*23.上下也⼀样，这个时候黄⾊⼩盒⼦就不会超出图⽚区域了5.⼩盒在图⽚上移动多少，显⽰区域要移动同⽐例的距离// 通过计算，得出⼩盒⼦在图⽚移动多少，显⽰区就移动多少的⽐例srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'显⽰区域移动的多少，取决于⼩盒⼦移动多少⼩盒⼦移动的值除以图⽚的宽度乘以显⽰区域的宽度显⽰区域的移动值就可以和⼩盒⼦在图⽚的移动⽐例相同6.显⽰区⼤⼩改变或显⽰区内容变化，图⽚上黄⾊盒⼦随之改变// 计算黄⾊⼩盒⼦在图⽚上的⼤⼩yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'}计算⽅式为：黄⾊盒⼦的宽=图⽚的宽/（显⽰区域的内容宽度/显⽰区域的框的宽度）⾼度也是⼀样的因为，是⿏标移动触发，所以实时刷新调整.img2{width: 3000px;height: 3000px;position: absolute;}#rightbox{position: absolute;top: 0;left: 650px;width: 900px;height: 900px;overflow: hidden;display: none;}当需要调整框的⼤⼩，或放⼤⽐例时，改变这两个样式的宽⾼即可内容，css，js 整体代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.img1{width: 300px;height: 300px;}.img2{width: 3000px;height: 3000px;position: absolute;}#rightbox{position: absolute;top: 0;left: 650px;width: 900px;height: 900px;overflow: hidden;display: none;}.yellow{background-color: yellow;opacity: 0.5;width: 100px;height: 100px;position: absolute;top: 0;left: 0;}.box1{width: 300px;height: 300px;position: relative;margin-left: 300PX;}</style></head><body><div class="box1"><img src="./images/1.jpg" alt="" class="img1"><div class="yellow"></div></div><div id="rightbox"><img src="./images/1.jpg" alt="" class="img2"></div><script>// 获取页⾯上我们需要的元素var box1=document.querySelector('.box1')var yellow=document.querySelector('.yellow')var box2=document.querySelector('#rightbox')var srceen=rightbox.children[0]// ⿏标进⼊和离开图⽚box1.onmouseenter=function(){box2.style.display='block'}box1.onmouseleave=function(){box2.style.display='none'}// ⿏标在图⽚上移动触发事件box1.onmousemove=function(e){// 算出⼩盒⼦在图⽚的中⼼点var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2// 判断⼩盒⼦是否超出img范围，使黄⾊⼩盒⼦不能超出img范围if(x<0){// 此时的0不是图⽚的左侧，⽽是⼩盒⼦在最左边时，⼩盒⼦的中⼼点x=0}else if(x>box1.offsetWidth-yellow.offsetWidth){// ⼩盒⼦的X轴中⼼点⼤于图⽚盒⼦的宽度减去⾃⾝宽度时，说明超出，则始终等于图⽚盒⼦的宽度减去⾃⾝宽度 x=box1.offsetWidth-yellow.offsetWidth}// 同上if(y<0){y=0}else if(y>box1.offsetHeight-yellow.offsetHeight){y=box1.offsetHeight-yellow.offsetHeight}// 给黄⾊⼩盒⼦赋值，让黄⾊⼩盒⼦跟随⿏标移动yellow.style.left=x+'px'yellow.style.top=y+'px'// 通过计算，得出⼩盒⼦在图⽚移动多少，显⽰区就移动多少的⽐例srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'// 计算黄⾊⼩盒⼦在图⽚上的⼤⼩yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'}</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript图形实例：图形放大镜效果

JavaScript图形实例：图形放大镜效果1. 基本四瓣花型图案根据四瓣花卉线的参数方程：t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);x=t*cos(θ));y=t*sin(θ));编写如下的HTML文件。

<!DOCTYPE html><head><title>基本的四瓣花型图案</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,320,320);context.strokeStyle="blue";context.lineWidth=1;var dig=Math.PI/64;context.beginPath();for (var i=0;i<=128;i++){d=120*(1+Math.sin(12*i*dig)/5);t=d*(0.5+Math.sin(4*i*dig)/2);x=(160+t*Math.cos(i*dig));y=(160+t*Math.sin(i*dig));if (i==0)context.moveTo(x,y);elsecontext.lineTo(x,y);}context.stroke();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="320" height="320"></canvas></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的四瓣花卉线图案。

js实现购物网站商品放大镜效果

js实现购物⽹站商品放⼤镜效果本⽂实例为⼤家分享了js实现购物⽹站商品放⼤镜效果的具体代码，供⼤家参考，具体内容如下⾸先说⼀下原理，以天猫某商品放⼤镜效果为例：所谓的放⼤镜效果，其实也是欺骗我们眼球的⼀种效果，这⾥我们可以看到，图⽚显⽰去下⾯那⼀排⼩图与遮盖层的图⽚和放⼤层的图⽚其实是⼀样的，只是分辨率不同，所以实现放⼤镜效果，就需要这么⼏组分辨率⼤⼩不同，但是图⽚内容相同的图⽚：显然，⼩图中放的就是我这⾥图⽚名中带有small的⼩图了，遮盖层就是正常⼤⼩的图，放⼤层就是带有big的放⼤的图了，然后再加⼊适当的位移和显⽰效果，就达成我们见到的放⼤镜效果了，下⾯就通过代码来实现吧：⾸先写出HTML结构：<div id="box"><div class="show"><img src="./images/1.jpg" alt="#"><div class="drag"></div></div><div class="magnify"></div><ul><li class="active"><img src="./images/1.small.jpg" alt="#"></li><li><img src="./images/2.small.jpg" alt="#"></li></ul></div><script type="text/javascript" src="./javascript/mgfyGlass.js"></script><script>const oBox = document.querySelector('#box');const imgArr = [{small: '1.small.jpg', normal: '1.jpg', big: '1.big.jpg'},{small: '2.small.jpg', normal: '2.jpg', big: '2.big.jpg'}];</script>然后加⼊css样式：body,div,ul,li{margin: 0; padding: 0;list-style: none;font-size: 0;}img{display: block;}#box{width: 650px;position: relative;margin: 0 auto 0 240px;}#box .show{width: 600px;border: solid 2px hotpink;position: relative;}#box .show img{width: 100%;}#box .show .drag{position: absolute;width: 200px;height: 200px;background-color: #e0a8d7;opacity: .4;left: 0;top: 0;display: none;}#box .magnify{width: 800px;height: 800px;border: solid 2px #7d777b;position: absolute;left: 100%;top: 0;background: url("../images/1.big.jpg") no-repeat 0 0 / 2400px;display: none;}#box ul{width: 100%;height: 150px;margin-top: 20px;}#box ul::after{content: '';display: block;clear: both;}#box ul li{height: 100%;float: left;margin: 0 8px;border: solid 2px #fff;}#box ul li.active{border-color: hotpink;}#box ul li img{height: 100%;}这⾥设置css样式的时候需要注意：放⼤层是通过遮盖层等⽐放⼤的，所以放⼤层的宽⾼与遮盖层宽⾼的⽐，和，放⼤层背景图⼤⼩与正常显⽰图⽚（也就是class=“show” 盒⼦中的图⽚）⼤⼩的⽐是相同的。

javascript实现简单放大镜效果

javascript实现简单放⼤镜效果⼀个⼤盒⼦中有⼀张图⽚，⿏标放上去会出现⼀个半透明的遮罩层，⿏标移动，遮罩层跟着移动，盒⼦旁边还有⼀个放⼤的图⽚，跟着遮罩层移动的位置⽽改变放⼤图的位置，⿏标离开⼤盒⼦，遮罩层和放⼤图⽚消失实现思路1、html、css将盒⼦，遮罩层、放⼤图⽚页⾯编辑好，设置遮罩层和放⼤图⽚默认隐藏2、获取元素对象，将⼤盒⼦绑定⿏标事件⿏标经过- - -mouseover，⿏标经过时设置遮罩层和放⼤图显⽰：display设置成'block'⿏标离开- - -mouseout，⿏标经过时设置遮罩层和放⼤图显⽰：display设置成'none'3、计算出⿏标在⼤盒⼦中的位置4、让⿏标在遮罩层的中间位置：让遮罩层相对⿏标位置向上向左移动⼀半距离就⾏遮罩层的位置- - -给它绝对定位，赋值相对盒⼦中的向上向左偏移量5、限制遮罩层在⼤盒⼦⾥移动- - -判断偏移量的值，<=0 的时候，偏移量为06、放⼤图随着遮罩层的移动⽽改变位置遮罩层移动值 / 遮罩层移动最⼤距离 = 放⼤图移动距离 / 放⼤图移动最⼤距离根据这个关系式，得到放⼤图的移动距离将移动距离赋值给放⼤图的偏移量top、left注意：放⼤图的偏移量给成负值，和遮罩层移动⽅向相反代码⽰例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>⼿机详情页</title><style>* {margin: 0;padding: 0;}.detail-content {width: 1200px;margin: 0 auto;}img {border: 0;vertical-align: middle;}.preview_img {position: relative;width: 400px;height: 400px;margin-top: 30px;border: 1px solid #ccc;}.preview_img img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background-color: pink;opacity: .5;cursor: move;}.big {display: none;position: absolute;top: 0;left: 410px;width: 500px;height: 500px;border: 1px solid #ccc;background-color: pink;z-index: 999;overflow: hidden;}.big img {position: absolute;top: 0;left: 0;width: 800px;height: 800px;}</style></head><body><div class="detail-content"><div class="preview_img"><img src="upload/s3.png" alt=""><div class="mask"></div><div class="big"><img src="upload/big.jpg" alt="" class="bigImg"></div></div></div><script>var previewImg = document.querySelector('.preview_img');var mask = document.querySelector('.mask');var big = document.querySelector('.big');var bigImg = document.querySelector('.bigImg');// ⿏标经过盒⼦事件previewImg.addEventListener('mouseover', function() {// 设置遮挡层和放⼤图显⽰mask.style.display = 'block';big.style.display = 'block';})// ⿏标离开盒⼦事件previewImg.addEventListener('mouseout', function() {// 设置遮挡层和放⼤图隐藏mask.style.display = 'none';big.style.display = 'none';})// ⿏标在盒⼦内移动事件previewImg.addEventListener('mousemove', function(e) {// 获取⿏标在盒⼦中的位置var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// 计算出遮挡层的移动值，让⿏标在遮挡层中间位置var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// 盒⼦为正⽅形，所以只算最⼤⽔平⽅向 X轴移动值就⾏，Y轴最⼤移动值和 X轴⼀致 var maskMax = previewImg.offsetWidth - mask.offsetWidth;// 限制遮挡层在盒⼦内移动if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 计算出放⼤图的最⼤移动值，⼤图⽔平移动值 = 遮挡层移动值 * ⼤图最⼤移动距离 / 遮挡层最⼤移动距离 var bigMax = bigImg.offsetWidth - big.offsetWidth;var bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigImg.style.left = -bigX + 'px';bigImg.style.top = -bigY + 'px';})</script></body></html>页⾯效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实现图片放大镜效果

JavaScript实现图⽚放⼤镜效果本⽂实例为⼤家分享了js实现图⽚放⼤镜效果的具体代码，供⼤家参考，具体内容如下1、结构布局HTML代码<div class="leftcon" id="left"><img src="~/Content/images/风景-1.jpg" /><div class="slide_box" id="box"></div></div><div class="rightcon" id="right"><img src="~/Content/images/风景-1.jpg" /></div>2、修饰结构css样式代码img {display: block;}.leftcon {width: 350px;height: 350px;margin: 100px 20px 0px 312px;float: left;position: relative;box-shadow: 3px 3px 10px 0 #111111; /*给图⽚施加阴影效果 */-webkit-box-shadow: 3px 3px 10px 0 #111111; /*兼容性处理*/-moz-box-shadow: 3px 3px 10px 0 #111111;}.leftcon img {width: 100%;height: 100%;}.leftcon .slide_box {display: none; /*将⼩⽅块盒⼦隐藏*/position: absolute;top: 0;left: 0;width: 175px;height: 175px;background: #000;opacity: 0.3;cursor: move; /*改变⿏标的形状*/}.rightcon {display: none; /*将右边div隐藏*/width: 350px;height: 350px;margin-top: 100px;float: left;overflow: hidden;position: relative;}.rightcon img {width: 200%;height: 200%;position: absolute;left: 0px;top: 0px;}3、js获取事件对象1）、Event是获取事件对象，对象代表事件的状态，⽐如事件在其中发⽣的元素、键盘按键的状态、⿏标的位置、⿏标按钮的状态,envet是windows的⼀个属性。

js实现图片放大镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript" >$().ready(function(){$("#xiaotu").mousemove(function(e){var smallW=$("#xiaotu>#tu>img").attr("width");//小图片的宽度var bigimage=new Image();bigimage.src=$("#xiaotu>#tu>img").attr("src");var bigimageW=bigimage.width;//大图片实际宽度var bigimageT=bigimage.height;//大图片实际高度var bili=bigimageW/smallW;//比例var smallH=Math.ceil(bigimage.height/bili);//小图片的高度var whiteW=Math.ceil(400/bili);//小白的宽度，等于高度//alert(whiteW);var mouseL=e.pageX;//鼠标的x坐标var mouseT=e.pageY;//鼠标的ny坐标var smallimageT=$("#tutu").offset().top;//小图片距离顶端的距离var smallimageL=$("#tutu").offset().left;//小图片距离左端的距离var aa=whiteW/2;var whiteL=Math.ceil(mouseL-smallimageL-whiteW/2);//小白图片距离小图片左边的位置var whiteT=Math.ceil(mouseT-smallimageT-whiteW/2);//小白图片距离小图片顶边的位置//alert(bigimageT);//alert(whiteL);if(whiteT<0){whiteT=0;}if(whiteT>smallH-whiteW){whiteT=smallH-whiteW;}if(whiteL<0){whiteL=0;}if(whiteL>500-whiteW){whiteL=500-whiteW;}var bigimageT=Math.ceil(whiteT*bili);var bigimageL=Math.ceil(whiteL*bili);//alert(bigimageT);$("#datu").show();$("#baikuang").show();$("#baikuang").css("left",whiteL);$("#baikuang").css("top",whiteT);$("#baikuang").css("width",whiteW); $("#baikuang").css("height",whiteW); $("#datu>img").css("margin-left",-bigimageL) $("#datu>img").css("margin-top",-bigimageT)})})$().ready(function(){$("#xiaotu").bind("mouseleave",function(){ $("#datu").hide();$("#baikuang").hide();})})</script><style type="text/css">body{margin:0; padding:0;}#datu{width:400px;height:400px;border:1px #009900 solid;overflow:hidden;position:absolute;display:none;left:500px;top:0px;}#baikuang{border:0;position:absolute;opacity:0.6;background:#0650D5;}#xiaotu{ padding:0px;margin:0 auto;position:relative;margin-left:100px;margin-top:100px;}#tu{margin:0px;padding:0px;}</style></head><body><div id="div1"></div><div id="xiaotu"><div id="baikuang"></div><div id="tu"><img id="tutu" src="aa.jpg" width="500"/><div> </div><div id="datu"><img src="aa.jpg" id="da"></div></div><input type="button" value="点击"></body></html>。

js实现简单放大镜效果

js实现简单放⼤镜效果⽤js实现简单放⼤镜效果，供⼤家参考，具体内容如下此处放⼤镜实现的效果就是当⿏标放置在图⽚上会有半透明遮罩，图⽚的⼀个区域就会被放⼤，然后展⽰在右边。

当⿏标移动时右边的⼤图⽚也会局部移动。

这⾥的放⼤并不是真正的放⼤，⽽是等⽐例移动。

下⾯是实现的代码：css样式代码如下：<style>.s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;}.s_box img{width: 400px;height: 300px;}.s_box span{width: 130px;height: 100px;background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}.b_box{width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}.b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}.list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}.list li{float: left;margin: 0 10px;}.list li img{width: 100px;height: 80px;}</style>html代码如下：<body><div class="s_box"><img src="../img/large1.jpg" alt=""><span></span></div><div class="b_box"><img src="../img/large1.jpg" alt=""></div><ul class="list"><li><img src="../img/large1.jpg" alt=""></li><li><img src="../img/large2.jpg" alt=""></li></ul></body>js主要代码如下：// 分析:// 1.选择元素// 2.绑定事件// 3.进⼊的时候显⽰元素// 4.移动：遮罩层跟随⿏标移动的同时计算遮罩层的移动⽐例、右侧⼤图，等⽐例移动// 5.离开的时候隐藏元素<script>class Large{constructor(){this.sBox = document.querySelector(".s_box");this.sImg = document.querySelector(".s_box img");this.sSpan = document.querySelector(".s_box span");this.bBox = document.querySelector(".b_box");this.bImg = document.querySelector(".b_box img");// 点击⼩图切换⼤图的按钮this.li = document.querySelectorAll(".list li");}addEvent(){var that = this;this.sBox.onmouseover = function(){that.over();}this.sBox.onmousemove = function(eve){var e = eve || window.event;that.move(e);}this.sBox.onmouseout = function(){that.out();}// 切换图⽚按钮的点击事件：根据布局做出调整for(var i=0;i<this.li.length;i++){this.li[i].onclick = function(){that.sImg.src = this.children[0].src;that.bImg.src = this.children[0].src;}}}over(){this.sSpan.style.display = "block";this.bBox.style.display = "block";}move(e){// 计算遮罩层跟随⿏标移动时的left和topvar l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;// 边界限定if(l<0) l=0;if(t<0) t=0;if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){l = this.sBox.offsetWidth - this.sSpan.offsetWidth;}if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){t = this.sBox.offsetHeight - this.sSpan.offsetHeight;}// 设置遮罩层的位置this.sSpan.style.left = l + "px";this.sSpan.style.top = t + "px";// 根据遮罩层移动的距离计算⽐例var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);// 根据上⼀步得到的⽐例，计算右侧⼤图要移动的当前值this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";}out(){this.sSpan.style.display = "none";this.bBox.style.display = "none";}}// 启动var l = new Large();l.addEvent();</script>实现效果：更多关于放⼤镜的精彩⽂章，请点击链接查看：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js实现放大镜效果的思路与代码

js实现放⼤镜效果的思路与代码本⽂实例为⼤家分享了js实现放⼤镜效果的具体代码，供⼤家参考，具体内容如下样式展⽰：思路先准备两张图⽚,⼀张⼩图,⼀张⼤图，并且两张图⽚有⼀个整数⽐值在⼩图⽚的上⽅设置⼀个放⼤镜样式,背景设为透明⾊即可⼤图⽚外边套⼀个⽗元素,超出⽗元素隐藏，⼤⼩为只能容纳你的放⼤部分即可⽗元素与放⼤镜样式的⽐值=⼤图与⼩图的⽐值在⼩图⽚上进⾏⿏标移动时获取⿏标的坐标，得到⿏标当前处于⼩图⽚上的坐标根据对应的⽐例求出⼤图⽚的坐标并移动⼤图⽚令放⼤部分处于⽗元素可见范围代码1.html部分<div id="box"><div id="toBig"></div><img src="img/05.jpg" id="smallImg" width="800px"></div><div id="beBig"><img src="img/05.jpg" id="bigImg" width="1200px"></div>2.css样式部分*{margin: 0px;padding: 0px;}#box{position: relative;float: left;}#toBig{width: 80px;height: 80px;border: 1px solid gray;background-color: transparent;position: absolute;}#beBig{float: left;overflow: hidden;border: 1px solid gray;position: relative;left: 40px;top:325px ;}#bigImg{position: absolute;}3.脚本部分<script type="text/javascript">//获取⼩图⽚,⼤图⽚,放⼤镜元素,⼤图⽚的⽗元素var smallImg=document.querySelector("#smallImg");var bigImg=document.querySelector("#bigImg");var toBig=document.querySelector("#toBig");var beBig=document.querySelector("#beBig");/*在页⾯加载时就先计算出⼩图⽚与⼤图⽚的⽐例*/var q=0;window.onload=function(){q=bigImg.offsetWidth/smallImg.offsetWidth;//根据放⼤镜的宽⾼和⽐例计算要显⽰放⼤内容的⼤⼩beBig.style.width = toBig.clientWidth * q +"px";beBig.style.height = toBig.clientHeight * q +"px";}//获取放⼤镜元素的中⼼，保证⿏标在放⼤镜中⼼var xCenter=toBig.clientWidth/2;var yCenter=toBig.clientHeight/2;//flag是⼀个标志,当⿏标按下时为true,可以进⾏移动flag=false;toBig.onmousedown = function(){flag=true;}toBig.onmouseup = function(){flag=false;}window.onmousemove=function(ev){var ev = ev || window.event;//flag为true时,放⼤镜元素被按下并可以进⾏拖动if(flag){//获取⿏标当前所在位置并计算除了元素⾃⾝外要移动的位置var mouseX=ev.clientX,mouseY=ev.clientY;var trueX=mouseX - xCenter;//判断放⼤镜元素是否超出⼩图⽚范围if(trueX < smallImg.offsetLeft){trueX = smallImg.offsetLeft;}if(trueX > smallImg.clientWidth - toBig.offsetWidth){trueX = smallImg.clientWidth - toBig.offsetWidth;}var trueY=mouseY - yCenter;if(trueY <= smallImg.offsetTop){trueY = smallImg.offsetTop;}if(trueY > smallImg.clientHeight - toBig.offsetHeight){trueY = smallImg.clientHeight - toBig.offsetHeight;}//⼩图⽚移动toBig.style.left = trueX + "px";toBig.style.top = trueY + "px";console.log(trueX,trueY);// ⼤图⽚要移动的位置bigImg.style.left =-(trueX * q) + "px";bigImg.style.top =-(trueY * q) + "px";}}</script>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

javaScript放大镜特效

javaScript放⼤镜特效要实现的效果：⿏标放到⼩图⽚上⼩图⽚上⽅会出现⼀个⼩块，这个⼩块⾥⾯的区域会放⼤显⽰到右边⼤图⾥⾯（如下图所⽰）这个效果主要⽤到的是：⿏标的坐标e.clientX，e.clientY,偏移量offsetLeft，offsetTop,offsetWidth,sffsetHeight等属性。

HTML和CSS代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{background:#2c3e50;}.wrap{display: flex;position: relative;left: 200px;top: 30px;}.small{width: 500px;height: 300px;border-radius: 20px;overflow: hidden;position: relative;left: 0px;}.small img{width: 100%;height: 100%;}.small span{display: none;position: absolute;left: 0;top: 0;width: 100px;height: 100px;background: rgba(0,0,0,0.5);cursor: pointer;z-index: 1;}.big{display: none;width: 400px;height: 400px;overflow: hidden;position: relative;left: 50px;top: 0;}.big img{position: absolute;left: 0;top: 0;width: 1000px;height: 600px;}</style></head><body><div class="wrap"><div class="small"><img src="img/33.jpg" alt=""><span></span></div><div class="big"><img src="img/33.jpg" alt=""></div></div></body></html>JS部分：⿏标移⼊放⼤镜（⼩图上的⼩块）显⽰，右边⼤图显⽰//最⼤的容器let wrap=document.querySelector('.wrap');//⼩图部分let smallWrap=document.querySelector('.wrap .small');let smallImg=document.querySelector('.wrap .small img');let smallBox=document.querySelector('.wrap .small span');//⼤图部分let bigBox=document.querySelector('.wrap .big');let bigImg=document.querySelector('.wrap .big img');smallWrap.onmouseover=function(){smallBox.style.display="block";bigBox.style.display="block";}⿏标在⼩图上移动时放⼤镜跟随移动，⽤event对象的event.clientX,和event.clientY来获取⿏标的坐标。

js图片放大镜特效代码

js图片放大镜特效代码2010-03-15 14:21:55| 分类：JavaScript | 标签：|字号大中小订阅<script language="JavaScript"></script><style type="text/css"></style><div class="head">图片放大效果</div><div id="smallbox"><img id="smallpic" src="/upload/20071130224657571.jpg" border="0" onmousemove="move(event)"></div><div id="bigbox"></div><div id="view"></div>。

JavaScript实现放大镜效果

JavaScript实现放⼤镜效果本⽂实例为⼤家分享了JavaScript实现放⼤镜效果的具体代码，供⼤家参考，具体内容如下这次实现的效果如下：这次的案例稍微有⼀点难度，在css和js上都需要多加思考，话不多说，让我们来开始吧~1、⾸先我们需要使⽤html和css规划好整体的布局，即两个相邻的盒⼦A和B，左边的盒⼦A中还有⼀个⼩盒⼦S。

为了实现相邻，我采⽤的⽅法是为其均设置position:absolute，然后设置left和top的值来使其相邻。

⼩盒⼦S我们同样可以为其设置position:absolute，调整⼀下背景颜⾊即可。

2、然后我们需要使⽤js来设置动画效果，即：⿏标放在盒⼦A上时，⼩盒⼦S的位置会随着⿏标的移动发⽣移动，同时盒⼦B 中的图像会成为盒⼦S覆盖图像的放⼤版。

如何实现呢？3、⾸先实现⼩盒⼦S的位置变化：调⽤盒⼦A的onmousemove函数，传⼊参数client，表⽰时间⿏标在盒⼦A上移动。

我们通过client获取⿏标的位置(clientX，clientY)，然后通过(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)可获得⿏标在图像上的相对坐标，通过此值减去盒⼦S的宽度、⾼度的⼀半即可获得盒⼦S在A中的位置。

但是要注意，记得为盒⼦S设置边界，当横坐标为0或为A盒⼦宽度、纵坐标为0或者A盒⼦⾼度时，要使其坐标固定。

4、接着实现盒⼦B中的图像会成为盒⼦S覆盖图像的放⼤版：我们⾸先来思考⼀个问题，这个放⼤效果如何才能实现呢？从我的实现⾓度出发，对于盒⼦B来说，它⾸先需要⼀个背景图==盒⼦A中的图像，然后将其放⼤某个倍数x，当盒⼦S移动时，改变B的background-position为y，达到放⼤+移动的效果。

5、最后⼀点，x和y的值是多少呢？（假定S、A、B均为等⽐例） x：将盒⼦B放⼤的倍数应该等同于A的⼤⼩除以S的⼤⼩，这样能达到相同的图像范围。

js实现图片局部放大效果详解

js实现图⽚局部放⼤效果详解图⽚局部放⼤效果结合的知识点主要是DOM的操作，以及事件的应⽤，所以⾸先要对DOM的操作有⼀定了解，其次能对事件的应⽤有⼀定的累积。

如上图，可以看到，这是放⼤镜的基本效果，主要分成左右两个部分。

左边分成⼀张⼤图，和⼀个导航栏，在右边则是⼀个放⼤镜放⼤后的图⽚。

因此，我在画页⾯的时候，⼤体的HTMl结构如下：<body><div class="choose"><div class="content"><img src="images/small1.jpg" id = "small"><div class="shadow"></div></div><ul id = "listshow"><li class="selected"><img src="images/small1.jpg" data-img = "images/big1.jpg" alt=""></li><li><img src="images/small2.jpg" data-img = "images/big2.jpg" alt=""></li><li><img src="images/small3.jpg" data-img = "images/big3.jpg" alt=""></li><li><img src="images/small4.jpg" data-img = "images/big4.jpg" alt=""></li></ul></div><div class="larger"><img src="images/big1.jpg" id = "big"></div></body>在这个时候，将静态页⾯按常规⽅式进⾏布局，给予css样式如下：<style>*{padding: 0;margin: 0;list-style: none;}.choose{width: 400px;height: 600px;float: left;margin:50px 0 0 50px;}.content{width: 400px;height: 400px;position: relative;}.content img {width: 400px;height: 400px;}#listshow{width: 400px;height: 100px;margin-top: 20px;}#listshow li{width: 98px;height: 100px;float: left;border:1px solid #666;}#listshow li img{width: 98px;height: 100px;}#listshow .selected{border-color: brown;}.larger{width: 400px;height: 400px;position: absolute;top: 50px;left: 500px;float: left;overflow: hidden;display: none;}#big{width: 800px;height: 800px;position: absolute;left: 0;top: 0;}.shadow{width: 200px;height: 200px;background-color: rgba(145,200,200,.4);position: absolute;left: 0;top: 0;z-index: 10;display: none;}</style>那么这个时候，开始写js样式，分布书写的话，第⼀步要考虑到左边的选项卡。

用js实现放大镜的效果的简单实例

⽤js实现放⼤镜的效果的简单实例第⼀次发博客，还有点⼩激动，本⼈现在正在天津上⼤学，希望以后从事前端这⼀⾏业，学习的时间不长，写博客为了记录⾃⼰的学习过程和收获，当然也算是巩固。

可能写的东西不会像⼤⽜那样⾼⼤上，只是⼀些基本的内容，当然我也会收藏⼀些我认为好的，不错的⽂章（其实最主要是我能看懂。

）。

我相信以后⾃⼰也能够写出⾼⼤上的东西。

加油！废话说的有点多，说正事。

前⼏天看了⼀段潭州教育的教学视频，其中的⽼师是⽤JQuery实现放⼤镜的效果（⽼师讲的是在是太慢，各种乱扯，跳着看的）。

由于我还没有好好的学习过JQuery，但是那些基本的代码还是可以看懂的，所以就想拿现在正在学习的js练⼀下⼿，最后还是成功的实现了这个效果。

思路：先让move块和bimg块隐藏，当⿏标移动到box上时，使move块和bimg块显⽰，获取⿏标当前的位置，然后经过计算给与move块和bimg块适当的值实现放⼤镜效果（move块和bimg块的位置的计算后⾯有详细介绍）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>放⼤镜</title><link href="css/bigimg.css" rel="stylesheet" /><script src="js/bigimg.js"></script></head><body onload="bigimg()"><div id="box"><img src="images/simg.jpg" alt="#"><div id="move"></div><div id="bimg"><img id="b_bimg" src="images/bimg.jpg" alt="#"></div></div></body></html>css样式：*{margin:0px;padding:0px;}#box{width:430px;height:430px;margin:100px;margin-left:17%;position:relative;//这⾥使⽤相对定位，好让其他的元素能依靠这个元素定位}#move{background-image:url(../images/move.png);width:220px;height:220px;position:absolute;left:0px;top:0px;display:none;//先让他隐藏，⽤js使其显⽰}#bimg{width:430px;height:430px;overflow:hidden;position:absolute;top:0px;left:450px;display:none;//先让他隐藏，⽤js使其显⽰}#bimg img{width:800px;height:800px;position:absolute;top:0px;left:0px;}Javascript:function bigimg(){var bbox = document.getElementById("box");var bmove = document.getElementById("move");var bbimg = document.getElementById("bimg");var b_bimg = document.getElementById("b_bimg");bbox.onmouseover = function(){//⿏标移动到box上显⽰⼤图⽚和选框bbimg.style.display = "block";bmove.style.display="block";}bbox.onmouseout = function(){//⿏标移开box不显⽰⼤图⽚和选框bbimg.style.display = "none";bmove.style.display="none";}bbox.onmousemove = function(e){//获取⿏标位置var x = e.clientX;//⿏标相对于视⼝的位置var y = e.clientY;var t = bbox.offsetTop;//box相对于视⼝的位置var l = bbox.offsetLeft;var _left = x - l - bmove.offsetWidth/2;//计算move的位置var _top = y - t -bmove.offsetHeight/2;if(_top<=0)//滑到box的最顶部_top = 0;else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部_top = bbox.offsetHeight-bmove.offsetHeight ;if(_left<=0)//滑到box的最左边_left=0;else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边_left=bbox.offsetWidth-bmove.offsetWidth ;bmove.style.top = _top +"px";//设置move的位置bmove.style.left = _left + "px";var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的⽐例var h = _top/(bbox.offsetHeight-bmove.offsetHeight);var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算⼤图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;b_bimg.style.top = -b_bimg_top + "px";//设置⼤图的位置信息b_bimg.style.left = -b_bimg_left + "px";}}效果图：1、move块的计算⿊⾊箭头：var x = e.clientX;//⿏标相对于视⼝的位置var y = e.clientY;红⾊箭头：var t = bbox.offsetTop;//box相对于视⼝的位置var l = bbox.offsetLeft;橙⾊箭头：var _left = x - l - bmove.offsetWidth/2;//计算move的位置var _top = y - t -bmove.offsetHeight/2;2、bimg块的计算利⽤move块在可移动范围内的⽐例来设置⼤图的位置move块的移动范围：bbox.offsetWidth-bmove.offsetWidthmove块现在的坐标占可移动范围的⽐例：var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的⽐例var h = _top/(bbox.offsetHeight-bmove.offsetHeight);bimg的移动范围：b_bimg.offsetHeight-bbimg.offsetHeightbimg的位置：var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算⼤图的位置var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;以上这篇⽤js实现放⼤镜的效果的简单实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

javascript实现电商放大镜效果

javascript实现电商放⼤镜效果本⽂实例为⼤家分享了javascript实现电商放⼤镜效果的具体代码，供⼤家参考，具体内容如下学习内容：1、event.pageX 属性返回⿏标指针的位置，相对于⽂档的左边缘。

2、clientX 事件属性返回当事件被触发时⿏标指针相对于浏览器页⾯（或客户区）的⽔平坐标。

3、onmouseenter⿏标移⼊4、onmouseleave⿏标移出案例完整代码。

html+css3+javascript案例需求:⿏标点击左边图⽚时（⿏标呈⼗字架），遮罩层显⽰，右边盒⼦显⽰。

且⿏标移动中⼼在遮罩层中⼼，右边⼤盒⼦显⽰⿏标点到的地⽅，以800：350⽐例显⽰。

遮罩层只能规定左边盒⼦范围内移动⽽且不给超出。

步骤：1. 查找元素1.1 查找 main 总分区1.2 查找 small 盒⼦1.3 查找 small 盒⼦内的 img ⼩图⽚1.4 查找 mask 遮罩层1.5 查找 big 盒⼦1.6 查找 big 盒⼦内的 img ⼤图⽚2. ⿏标移⼊ main 的时候2.1 显⽰遮罩盒⼦2.2 显⽰⼤图分区3. ⿏标移出 main 的时候3.1 隐藏遮罩盒⼦3.2 隐藏⼤图分区4. ⿏标在 main 移动的时候4.1 遮罩盒⼦跟随⿏标移动4.2 遮罩盒⼦在⿏标中⼼处理4.3 遮罩盒⼦在分区边界内移动处理4.4 ⼤图⽚ <反向> <按⽐例> 跟随⿏标移动注意. 获取元素偏移值和宽⾼1. 获取分区的⽔平，垂直偏移值2. 获取分区的宽度，⾼度3. 获取遮罩盒⼦的宽度，⾼度 (隐藏的盒⼦⽆法获取宽⾼)4. 获取⼤图⽚的宽度，⾼度 (隐藏的盒⼦⽆法获取宽⾼) html代码:<body><div class="main" id="main"><div class="small"><img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" /> <div class="mask"></div></div><div class="big"><img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" /> </div></div></body>css代码:<style>* {margin: 0;padding: 0;}.main {width: 350px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.mask {width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0px;left: 0px;/* 把⿏标指针换成移动图标 */cursor: move;display: none;}.small {position: relative;height: 350px;width: 350px;}.active .mask,.active .big {display: block;}.big img {/* 相对定位：相对⾃⼰原本的位置定位，原来的位置保留的 */position: absolute;}</style>javascript代码:<script>//查找元素var main = document.querySelector(".main");var small = document.querySelector(".small"); //左边⼩盒⼦var smallImg = document.querySelector(".smallImg");var mask = document.querySelector(".mask"); //黄⾊遮罩层var big = document.querySelector(".big");//右边⼩盒⼦var bigImg = document.querySelector(".big .bigImg");//2. ⿏标移⼊ main 的时候//2.1 显⽰遮罩盒⼦// 2.2 显⽰⼤图分区main.onmouseenter=function () {mask.style.display="block";big.style.display="block";};main.onmouseleave=function () {mask.style.display="none";big.style.display="none";};// 4. ⿏标在 main 移动的时候// 4.1 遮罩盒⼦跟随⿏标移动// 4.2 遮罩盒⼦在⿏标中⼼处理// 4.3 遮罩盒⼦在分区边界内移动处理// 4.4 ⼤图⽚ <反向> <按⽐例> 跟随⿏标移动small.onmousemove=function (e) {var x=e.pageX-100-(175/2); //盒⼦的宽⾼为300px，因为⿏标默认在左上⾓。

js放大镜蒙层实现思路

js放大镜蒙层实现思路放大镜蒙层是一种常见的网页交互效果，通过鼠标hover或者手指滑动的方式，可以实现图片放大并在蒙层上显示放大后的细节。

这种效果常用于电商网站的商品展示页面，能够帮助用户更清晰地看到商品的细节，提升用户体验。

下面就来介绍一下实现放大镜蒙层的思路。

首先，我们需要准备好所需的图片资源和HTML结构。

在HTML中，我们需要一个包裹着原始图片的容器，并在其上方增加一个蒙层。

蒙层可以使用一个空的div元素来实现，并设置宽高与原始图片容器一致。

然后，我们需要在蒙层上创建一个用于显示放大镜效果的小区域，可以使用一个div元素来实现，并设置其宽高为原始图片容器的一半。

接下来，我们需要监听鼠标事件或者触摸事件，以实现放大镜效果的交互。

当鼠标移动到原始图片容器上，或者手指滑动在原始图片容器上触摸时，我们需要根据鼠标或者手指的位置计算放大镜效果的位置。

具体而言，我们可以通过监听鼠标移动事件的clientX和clientY属性，或者触摸事件的touches数组中的clientX和clientY属性来获取鼠标或手指的位置。

然后，我们可以根据鼠标或手指的位置，来设置放大镜效果的位置。

可以使用CSS的transform属性来实现放大镜效果的位置调整。

通过计算鼠标或手指的位置与原始图片容器的位置差值，并乘以一个放大倍数，再减去放大镜效果的宽高的一半，就可以得到放大镜效果应该相对于蒙层的位置。

然后，通过将这个位置应用到放大镜效果的CSS样式中，就可以实现放大镜效果的位置调整。

最后，我们需要根据放大镜效果的位置，在蒙层上显示相应位置的放大细节。

这个放大细节可以通过将原始图片容器的背景图设置为原始图片，然后通过改变其背景图位置的方式来实现。

具体而言，我们可以根据放大镜效果的位置，计算出应该显示的放大区域的位置，并通过设置背景图的background-position属性，将相应位置的放大细节显示在蒙层上。

综上所述，实现放大镜蒙层的思路可以分为以下几个步骤：准备所需的图片资源和HTML结构；监听鼠标事件或触摸事件，获取鼠标或手指的位置；根据鼠标或手指的位置，设置放大镜效果的位置；根据放大镜效果的位置，在蒙层上显示相应位置的放大细节。