jquery+js实现鼠标位移放大镜效果

合集下载

实现jquery放大镜的两种方法

实现jquery放⼤镜的两种⽅法jquery写的两种放⼤镜效果，没有使⽤到插件。

调理和思路清晰。

不是使⽤⾯向对象⽅式写的，初学者较容易看懂。

废话不多说，看代码。

图⽚这⾥就不上传了，⼤家⾃⼰找下。

最好是找到⽐例的，这样效果⽐较好。

<body><div id="father"><div id="container"><img src="img/400_1.jpg" style="display: block;"><img src="img/400_2.jpg" ><div class="shade"></div></div><div class="small first"><img src="img/50_1.jpg"></div><div class="small second"><img src="img/50_2.jpg"></div></div><div class="big"><img src="img/800_1.jpg" style="display: block;"><img src="img/800_2.jpg"></div></body>css代码*{padding: 0; margin: 0;}#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}#father .second{left: 70px;}.third{left: 140px;}#father{position: relative; top: 100px; left: 50px; height: 460px;}#container{position: absolute; width: 400px; height: 400px;}#container img{position: absolute; display: none;}.shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0;left: 0; display: none;}.big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;}.big img{width: 800px; height: 800px; position: absolute; display: none;}js代码<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script><script type="text/javascript">$(function () {changePic('.first',0);changePic('.second',1);var shadeWidth = $('.shade').width(),//阴影的宽度shadeHeight = $('.shade').height(),//阴影的⾼度middleWidth = $('#container').width(),//容器的宽度middleHeight = $('#container').height(),//容器的⾼度bigWidth = $('.big').width(),//放⼤图⽚盒⼦的宽度bigHeight = $('.big').height(),//放⼤图⽚盒⼦的⾼度rateX = bigWidth / shadeWidth,//放⼤区和遮罩层的宽度⽐例rateY = bigHeight / shadeHeight;//放⼤区和遮罩层的⾼度⽐例//当⿏标移⼊与移出时阴影与放⼤去显现/消失$('#container').hover(function() {$('.shade').show();$('.big').show();}, function() {$('.shade').hide();$('.big').hide();}).mousemove(function(e) {//当⿏标移动时，阴影和放⼤区图⽚进⾏移动//记录下光标距离页⾯的距离var x = e.pageX,y = e.pageY;//设置遮罩层的位置$('.shade').offset({top: y-shadeHeight/2,left: x-shadeWidth/2});//获取遮罩层相对⽗元素的位置var cur = $('.shade').position(),_top = cur.top,_left = cur.left,hdiffer = middleHeight - shadeHeight,wdiffer = middleWidth - shadeWidth;if (_top < 0) _top = 0;else if (_top > hdiffer) _top = hdiffer;if (_left < 0) _left = 0;else if (_left > wdiffer) _left =wdiffer;//判断完成后设置遮罩层的范围$('.shade').css({top: _top,left: _left});//设置放⼤区图⽚移动$('.big img').css({top: - rateY*_top,left: - rateX*_left});});;//封装的改变图⽚显⽰的函数function changePic (element,index) {$(element).click(function() {$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');$('.big img').eq(index).css('display', 'block').siblings().css('display', 'none');});}});以上是常⽤的，下⾯这个是在原图基础上放⼤的htm<body><div id="father"><div id="container"><img src="img/400_1.jpg" style="display: block;"><img src="img/400_2.jpg" ><img src="img/400_3.jpg" ><div class="shade"><img src="img/800_1.jpg" style="display: block;"><img src="img/800_2.jpg"><img src="img/800_3.jpg"></div></div><div class="small first"><img src="img/50_1.jpg"></div><div class="small second"><img src="img/50_2.jpg"></div><div class="small third"><img src="img/50_3.jpg"></div></div></body>css代码*{padding: 0; margin: 0;}#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}#father .second{left: 70px;}.third{left: 140px;}#father{position: relative; top: 100px; left: 50px; height: 460px;}#container{position: absolute; width: 400px; height: 400px;}#container img{position: absolute; display: none;}.shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;} .shade img{display: none; width: 800px; height: 800px; position: absolute;}js代码<span style="white-space:pre"> </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script><script type="text/javascript">$(function () {changePic('.first',0);changePic('.second',1);changePic('.third',2);var shadeWidth = $('.shade').width(),//阴影的宽度shadeHeight = $('.shade').height(),//阴影的⾼度middleWidth = $('#container').width(),//容器的宽度middleHeight = $('#container').height(),//容器的⾼度bigImgWidth = $('.shade img').width(),//放⼤图⽚盒⼦的宽度bigImgHeight = $('.shade img').height(),//放⼤图⽚盒⼦的⾼度rateX = bigImgWidth / middleWidth,//放⼤区和遮罩层的宽度⽐例2rateY = bigImgHeight / middleHeight;//放⼤区和遮罩层的⾼度⽐例2//当⿏标移⼊与移出时阴影与放⼤去显现/消失$('#container').hover(function() {$('.shade').show();$('.big').show();}, function() {$('.shade').hide();$('.big').hide();}).mousemove(function(e) {//当⿏标移动时，阴影和放⼤区图⽚进⾏移动//记录下光标距离页⾯的距离var x = e.pageX,y = e.pageY;//设置遮罩层的位置$('.shade').offset({top: y-shadeHeight/2,left: x-shadeWidth/2});//获取遮罩层相对⽗元素的位置var cur = $('.shade').position(),_top = cur.top,_left = cur.left,hdiffer = middleHeight - shadeHeight,wdiffer = middleWidth - shadeWidth;if (_top < 0) _top = 0;else if (_top > hdiffer) _top = hdiffer;if (_left < 0) _left = 0;else if (_left > wdiffer) _left =wdiffer;//判断完成后设置遮罩层的范围$('.shade').css({top: _top,left: _left});//设置放⼤区图⽚移动$('.shade img').css({top: - _top*rateY*3/2,left: - _left*rateX*3/2});});;//封装的改变图⽚显⽰的函数function changePic (element,index) {$(element).click(function() {$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); $('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none');});}});<span style="white-space:pre"> </span></script>。

js放大镜的实现原理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript简单实现放大镜效果代码导语：JavaScript简单实现放大镜效果代码是有百分网小编给大家提供的，大家可以参考阅读，更多详情请关注应届毕业生考试网。

<html><head><metacharset="UTF-8"><title></title><styletype="text/css">*{margin:0;padding:0;}img{vertical-align:top;}.fdj{width:350px;height:350px;position:relative;margin:100pxauto;border:1pxsolidgainsboro;}.small{position:relative;}.smallimg{width:350px;}.mask{width:100px;height:100px;background:rgba(255,255,0,0.4);position:absolute;left:0;top:0;cursor:move;display:none;}.big{position:absolute;top:0;left:360px;width:500px;height:500px;border:1pxsolidgainsboro;overflow:hidden;display:none;}.bigimg{position:absolute;left:0;top:0;}</style></head><body><pclass="fdj"><pclass="small"><imgsrc="cdn.attach.qdfuns/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg"/><pclass="mask"></p></p><pclass="big"><imgsrc="cdn.attach.qdfuns/notes/pics/201702/08/162503 mw0fawb5b02va22i.jpg"/></p></p></body><scripttype="text/javascript">varfdj=document.querySelector('.fdj')//获得最大的盒子varsmall=document.querySelector('.small');//获取小图片盒子varbig=document.querySelector('.big');//获取大图片盒子varbigs=big.children[0]//大图片varsmalls=small.children[0]//小图片varmask=small.children[1];//遮罩//鼠标移入小图片盒子small.onmouseover=function(){//鼠标移入图片盒子将遮罩与大图片显示mask.style.display='block';big.style.display='block';};//鼠标移出小图片盒子small.onmouseout=function(){//鼠标移出小图片盒子将遮罩与大图片隐藏mask.style.display='none';big.style.display='none';};varx=0;vary=0;//鼠标在小图片上移动时small.onmousemove=function(ev){varev=event||window.event;//让鼠标在遮罩正中//鼠标X坐标与Y坐标x=ev.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2; y=ev.clientY-this.offsetParent.offsetT op-mask.offsetHeight/2; //将遮罩限制在小图片盒子中if(x<0){x=0;}elseif(x>small.offsetWidth-mask.offsetWidth){x=small.offsetWidth-mask.offsetWidth;}if(y<0){y=0;}elseif(y>small.offsetHeight-mask.offsetHeight){y=small.offsetHeight-mask.offsetHeight}mask.style.left=x+'px';mask.style.top=y+'px';//大图与小图的比例varscalX=x/(small.offsetWidth-mask.offsetWidth); varscalY=y/(small.offsetHeight-mask.offsetHeight);bigs.style.left=-(x*scalX)+'px';bigs.style.top=-(y*scalY)+'px';};</script></html>。

用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实现放⼤镜的效果的简单实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

js放大镜效果

js放大镜效果鼠标放到一张图片上立刻显示出来这个图片的放大图是不是很炫！下面的代码就可以实现。

<!— THE SITE IS DESIGNED BY MYHYLI —><html><head><title>Untitled Document</title><meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″><script language=”JavaScript”><!–var zoomvalue=3;var magnifierw0=100;var magnifierh0=50;function init() {document.body.innerHTML+=’<div id=”magnifier”style=”background-image:url(images/spacer.gif);position:absolute; width:100px; height:50px; z-index:100; left: 0px; top: 0px;border:1px solid#FF0000;visibility:hidden;text-align:right;font-size:10px;font-family :Verdana;color:#FF0000;cursor:default;overflow:hidden”onclick=”showhide()” onselectstart=”return false;”>300%</div><div id=”zoom” style=”background-color:red;position:absolute;width:300px; height:150px; z-index:100; left: 0px; top: 0px;border:1px solid #CCCCCC;visibility:hidden”><iframe name=”zoomiframe”src=”about:blank” frameborder=”0″ scrolling=”no” width=”100%” height=”100%”></iframe></div>’;}function setposition() {zoom.style.left=document.body.clientWidth+document.body.scrollLeft-5-zoom.offsetWidth;zoom.style.top=document.body.scrollTop+5;}function showhide() {if (magnifier.style.visibility==’hidden’) {magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.offsetHeight/2;magnifier.style.visibility=’visible’;zoom.style.visibility=’visible’;zoomiframe.location.href=self.location;setposition();magnifier.setCapture();}else {if (event.shiftKey) {if (zoomvalue<1) {zoomvalue+=0.1;}else {zoomvalue=zoomvalue+1>8?8:zoomvalue+1;}magnifier.style.width=3*magnifierw0/zoomvalue;magnifier.style.height=3*magnifierh0/zoomvalue;magnifier.innerText=parseInt(zoomvalue*100)+’%';}else if (event.ctrlKey) {if (zoomvalue-1>0) zoomvalue-=1;else {if (parseInt(zoomvalue*10)/10>0.5) zoomvalue-=0.1;} magnifier.style.width=3*magnifierw0/zoomvalue;magnifier.style.height=3*magnifierh0/zoomvalue;magnifier.innerText=parseInt(zoomvalue*100)+’%';}else {magnifier.style.visibility=’hidden’;zoom.style.visibility=’hidden’;zoom.style.left=0;magnifier.releaseCapture();}}follow();}function follow() {if (magnifier.style.visibility==’visible’) {magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier .offsetWidth/2;magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.o ffsetHeight/2;zoomiframe.scrollTo(magnifier.offsetLeft,magnifier.offsetTop); zoomiframe.document.body.style.zoom=zoomvalue;zoomiframe.document.body.style.border=”;}}document.onmousemove=follow;document.onselectstart=new Function(‘return false;’);document.ondblclick=showhide;window.onresize=setposition;window.onload=init;// –></script><link rel=”stylesheet” href=”images/test.css” type=”text/css”> </head><body bgcolor=”#FFFFFF” text=”#000000″ leftmargin=”0″ topmargin=”0″><table width=500 border=0 cellspacing=0 cellpadding=0><tr><td><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p><p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p><p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p><p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p><p>您也能够试着将head区里的script单独存成js文档，放到您的页面里看看</p><p>但是使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或居右对齐方式</p></td></tr></table> </body> </html>。

用jquery实现放大镜效果

⽤jquery实现放⼤镜效果----css代码---*{margin:0;padding:0;}.showimg{position:relative;width:450px;height:420px;border:1px solid #f5f5f5;}.show{width:450px;height:420px;}.product-img img{margin:0 3px;width:60px;height:60px;border:2px solid #FFF;}.showbox{position:absolute;top:0;left:0;opacity:0.5;cursor:move;width:225px;height:210px;background-color:lightblue;display:none; }.showlarge{position:absolute;overflow:hidden;top:0;left:470px;width:450px;height:420px;border:1px solid #f5f5f5;display:none;}.showlarge img{width:900px;height:840px;position:absolute;}---html代码---<div class="showimg"><img class="show" src="img/01.jpg"><div class="showbox"></div><div class="showlarge"><img src="img/01.jpg"></div></div><div class="product-img"><img src="img/01.jpg"><img src="img/img1.jpg"><img src="img/img2.jpg"><img src="img/img3.jpg"><img src="img/01.jpg"></div></div>----js代码----<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script>$(function() {//⿏标移⼊产品⼩图事件$(".product-img img").mouseenter(function(){//⿏标悬浮在不同的产品⼩图⽚时外加⿊⾊边框并且主图将其显⽰出来$(".product-img img").css({"border":"2px solid #FFF"});$(this).css({"border":"2px solid #000"});//this获取的是当前⿏标移⼊的元素，设置⿊⾊边框var imgsrc=$(this).attr("src");//获取当前⿏标移⼊元素的src属性值将其赋值给主图元素$(".show").attr("src",imgsrc);$(".showlarge img").attr("src",imgsrc);//将⿏标选中的图传给放⼤图元素的src属性});//⿏标移⼊产品主图时出现放⼤的细节图和⼩框$(".showimg").mouseenter(function(){$(".showbox").show();$(".showlarge").show();});//⿏标在产品主图移动事件$(".showimg").mousemove(function(e){var mousex=e.clientX;//获取⿏标当前对于浏览器可视区的X坐标var mousey=e.clientY;var imgx=$(".showimg").offset().left;//获得产品主图对于⽂档的偏移坐标var imgy=$(".showimg").offset().top;//⼩框的left值是⿏标位移减去产品图元素偏移坐标减去⼩框宽度的⼀半，使⿏标保持位于⼩框的中间var boxleft=mousex-imgx-$(".showbox").width()/2;//计算⼩框对于产品主图元素的距离⽤来定位var boxtop=mousey-imgy-$(".showbox").height()/2;//⿏标移动⼩框位置跟着变化$(".showbox").css({"top":boxtop,"left":boxleft});//计算⼩框移动的最⼤范围var maxtop=$(".showimg").height()-$(".showbox").height();var maxleft=$(".showimg").width()-$(".showbox").width();//判断⼩框移动的边界if(boxtop<=0){$(".showbox").css("top","0");}else if(boxtop>maxtop){$(".showbox").css("top",maxtop);}if(boxleft<=0){$(".showbox").css("left","0");}else if(boxleft>maxleft){$(".showbox").css("left",maxleft);}//设置放⼤图的位置偏移量，获取⼩框偏移量乘放⼤倍数，注意放⼤图偏移量应设置为负值var showleft=-$(".showbox").position().left*2;//position()⽅法返回当前元素相对于⽗元素的位置（偏移）var showtop=-$(".showbox").position().top*2;//此处获取⼩框偏移量不应该使⽤前⾯计算出来的boxtop和boxleft值，因可能会出现超出移动的边界$(".showlarge img").css({"left":showleft,"top":showtop});});//⿏标离开产品主图元素事件，此处使⽤mouseleave事件只有在⿏标指针离开被选元素时才会触发，mouseout⿏标指针离开被选元素和其任何⼦元素都会触发。

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>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

响应式网页设计中常见的图片放大镜设计技巧(五)

响应式网页设计中常见的图片放大镜设计技巧随着移动设备的普及，越来越多的用户习惯使用手机、平板等设备访问互联网。

为了提升用户体验，响应式网页设计逐渐成为设计师们的首选。

在响应式设计中，图片放大镜成为了提升用户浏览体验的重要技巧之一。

本文将介绍几种常见的图片放大镜设计技巧，帮助设计师们更好地运用在响应式网页设计中。

一、放大镜效果的实现方式1. 鼠标悬停放大镜效果：这是最常见的图片放大镜效果。

当用户将鼠标移至图片上时，图片中心位置会放大显示，以便用户查看细节。

这种效果通常使用Javascript或jQuery技术实现。

实现方式很简单，通过监听鼠标移入事件，在图片上叠加一个透明的放大镜图层，通过改变放大镜图层的位置以及大小，实现图片放大效果。

2. 点击放大镜效果：这种方式适用于移动设备等没有鼠标的场景。

用户点击图片时，图片会放大显示，以便用户查看细节。

这种效果同样可以使用Javascript或jQuery技术实现。

通过监听点击事件，在图片上叠加一个放大镜图层，通过改变放大镜图层的位置以及大小，实现图片放大效果。

用户再次点击图片则恢复原样。

3. 触摸放大镜效果：这种方式适用于触摸屏设备。

用户触摸图片时，图片会放大显示，以便用户查看细节。

通常情况下，这种效果通过CSS3的transform属性实现。

通过监听触摸事件，在图片上应用缩放的transform变换，实现图片放大效果。

二、优化放大镜效果的设计1. 图片加载与显示：在实现放大镜效果时，图片的加载速度与显示质量至关重要。

为了提高用户体验，应尽量使用优化过的图片，并确保图片的加载速度快。

同时，可以使用图片预加载技术，提前加载放大镜所需的图片，避免用户需要等待。

2. 放大镜位置与大小：放大镜的位置和大小直接影响用户的使用体验。

放大镜应该位于图片的附近，并且不遮挡住重要的图像内容。

放大镜的大小可以根据需要进行调整，但不要过大，以免遮挡用户需要查看的细节。

3. 放大区域与缩放比例：放大镜效果最关键的是放大区域的选择和缩放比例的确定。

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>页⾯效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

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>实现效果：更多关于放⼤镜的精彩⽂章，请点击链接查看：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系
jquery+js 实现鼠标位移放大镜效果
2017/06/05 0 jQuery 实现仿某东商品详情页放大镜效果
用jquery+js 实现放大镜效果，效果大概如下图！
效果是不是大家很感兴趣，放大镜查看细节，下边大家可以详细看一看具体是怎
么实现的。

下边直接看代码！
HTML 部分排版代码就不上了，大概思路就是左右两个DIV，一个用来显示正常
显示的页面，一个用来显示放大图片！
js+jquery 实现效果代码如下：
var $magPic=$(“#magPic”);var $magRic=$(“#magRic”);var $mag=$(“.mag”);var $boxT=$(“.boxT”);$(“.ul1li”).mouseenter(function(){//attr()添加属性$magPic.attr(“src”,$(this).find(“img”).attr(“src”));
$magRic.attr(“src”,$(this).find(“img”).attr(“src”));});鼠标点击实现下边图片传到上边
图片效果；
//鼠标点击左右两侧发生改变var marginLeft=0; $(“.boxB.span2”).on(“click”,function(){marginLeft=marginLeft-63; if(marginLeft -252) marginLeft=-252; $(“.boxB.ul1”).css({“margin-left”:marginLeft});}) $(“.boxB.span1”).on(“click”,function(){marginLeft=marginLeft+63 if(marginLeft 0) marginLeft=0; $(“.boxB.ul1”).css({“margin-left”:marginLeft});})//放大镜效果//offset()
获取匹配元素在当前视口的相对偏移。

，配合LEFT，与TOP 使用、//client 获取适
口的位置！//outerWidth 元素的宽度包含padding()和border()var
L=$boxT.eq(0).offset().left;var T=$boxT.eq(0).offset().top;var mag_width=$mag.outerWidth()/2;var mag_height=$mag.outerHeight()/2;var maxL=$boxT.width()-$mag.outerWidth();var maxT=$boxT.height()- $mag.outerHeight();var
bili=$magRic.width()/$magPic.width();$boxT.mousemove(function(e){
//document.title=e.clientX+”,”+e.clientY;var magL=e.clientX-L-。