放大镜代码与说明

合集下载

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>。

淘宝店铺装修模板放大镜效果代码附安装教程

产品介绍：本宝贝放大镜效果模板可用于扶植版、标准版和拓展版，放大镜效果见本店铺主页图片效果。

图片轮播代码能美化你的店铺装修，吸引客户的注意力、激发他们的购买热情、提高宝贝的转化率放大镜模板(右侧代码如下：DIV class=box><DIV class=shop-custom><DIV class=hd><H3><span><img alt="" src="/imgextra/i1/751105631/T2tw40XkVcXXXXXXXX_!!7511056 31.jpg"> </span></H3></DIV><DIV class=bd><DIV class=custom-area><DIV style="TEXT-ALIGN: center; MARGIN-TOP: 12px; HEIGHT: 233px; FONT-SIZE: 12px"><ul style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 14px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a22"><img border=0 alt="" src="/imgextra/i1/751105631/T2QSRxXb8NXXXXXXXX_!!751105 631.jpg" width=160 height=160><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a22','align':{'node':'.ziguang-a22','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=175********" target=_blank data-attr-replace="[{'type':'href','desc':'1.第一个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i1/751105631/T2QSRxXb8NXXXXXXXX_!!751105 631.jpg" data-attr-replace="[{'type':'src','desc':'1. 第一个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'1. 第一个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >淘宝店铺旺铺装修模板店铺装修扶植版256套免费送教程</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'1. 第一个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">2.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a23"><img border=0 alt="" src="/imgextra/i3/751105631/T2QnNDXn8MXXXXXXXX_!!75110 5631.jpg" width=160 height=160><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a23','align':{'node':'.ziguang-a23','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=14771466904" target=_blank data-attr-replace="[{'type':'href','desc':'2. 第二个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i3/751105631/T2QnNDXn8MXXXXXXXX_!!75110 5631.jpg" data-attr-replace="[{'type':'src','desc':'2. 第二个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'2. 第二个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >淘宝店铺装修模板1300套店铺装修扶植版标准版免费送教</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'2. 第二个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">2.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-picziguang-a24"><img border=0 alt="" src="/imgextra/i3/751105631/T2538bXbRNXXXXXXXX_!!7511056 31.jpg" width=160 height=160><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a24','align':{'node':'.ziguang-a24','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=175********&" target=_blank data-attr-replace="[{'type':'href','desc':'3. 第三个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i3/751105631/T2538bXbRNXXXXXXXX_!!7511056 31.jpg" data-attr-replace="[{'type':'src','desc':'3. 第三个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'3. 第三个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >淘宝店铺装修模板全套旺铺装修扶植版标准版免费送教程</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'3. 第三个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">8.80元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a25"><img border=0 src="/imgextra/i3/751105631/T2icxKXexcXXXXXXXX_!!75110563 1.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'4. 第四个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a25','align':{'node':'.ziguang-a25','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=14900021738" target=_blank data-attr-replace="[{'type':'href','desc':'4. 第四个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i3/751105631/T2icxKXexcXXXXXXXX_!!75110563 1.jpg" data-attr-replace="[{'type':'src','desc':'4. 第四个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'4. 第四个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >店铺装修模板扶植版标准版拓展版之950/750图片轮播</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'4. 第四个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">2.00元</DIV></li></ul></DIV><DIV style="TEXT-ALIGN: center; MARGIN-TOP: 19px; HEIGHT: 233px; FONT-SIZE: 12px"><ul style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 14px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a27"><img border=0 src="/imgextra/i1/751105631/T2OwReXlNNXXXXXXXX_!!751105 631.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'5. 第五个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a27','align':{'node':'.ziguang-a27','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=176********" target=_blank data-attr-replace="[{'type':'href','desc':'5. 第五个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i1/751105631/T2OwReXlNNXXXXXXXX_!!751105 631.jpg" data-attr-replace="[{'type':'src','desc':'5. 第五个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'5. 第五个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >淘宝自动发货软件/发卡密/发货短信提醒/自动评价</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'5. 第五个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">2.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a28"><img border=0 src="/imgextra/i2/751105631/T2np8eXiNNXXXXXXXX_!!7511056 31.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'6. 第六个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a28','align':{'node':'.ziguang-a28','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=176********&" target=_blank data-attr-replace="[{'type':'href','desc':'6. 第六个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i2/751105631/T2np8eXiNNXXXXXXXX_!!7511056 31.jpg" data-attr-replace="[{'type':'src','desc':'6. 第六个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'6. 第六个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" ><br>冲钻特价网站推广软件SEO优化百度推广搜索优化</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'6. 第六个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">4.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a29"><img border=0 src="/imgextra/i4/751105631/T2URFgXhXNXXXXXXXX_!!751105 631.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'7. 第七个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a29','align':{'node':'.ziguang-a29','offset':[0,0],'points':['cc' ,'cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=158********" target=_blank data-attr-replace="[{'type':'href','desc':'7. 第七个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i4/751105631/T2URFgXhXNXXXXXXXX_!!751105631.jpg" data-attr-replace="[{'type':'src','desc':'7. 第七个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'7. 第七个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >店铺装修模板扶植版标准版拓展版放大镜效果模板</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'7. 第七个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">2.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a210"><img border=0 src="/imgextra/i1/751105631/T2_pBJXc4cXXXXXXXX_!!75110563 1.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'8. 第八个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a210','align':{'node':'.ziguang-a210','offset':[0,0],'points':[' cc','cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=14875934495" target=_blank data-attr-replace="[{'type':'href','desc':'8. 第八个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-692656120.gif "><img border=0 src="/imgextra/i1/751105631/T2_pBJXc4cXXXXXXXX_!!75110563 1.jpg" data-attr-replace="[{'type':'src','desc':'8. 第八个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'8. 第八个宝贝标题'}]"data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-692656120.gif" >淘宝店铺装修模板全套旺铺装修扶植版标准版</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMIL Y: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold"><font style="BACKGROUND-COLOR: transparent; FONT-FAMIL Y: georgia; COLOR: #c00000; FONT-SIZE: 12pt" data-attr-replace="[{'type':'innerHTML','desc':'8. 第八个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-692656120.gi f">2.00元</font></DIV></li></ul></DIV><DIV style="TEXT-ALIGN: left; HEIGHT: 10px"></DIV></DIV></DIV></DIV></DIV>放大镜模板左侧代码如下：DIV class=box><DIV class=shop-custom><DIV class=hd><H3><span>热卖推荐（放大展示）</span></H3></DIV><DIV class=bd><DIV class=custom-area><DIV style="TEXT-ALIGN: center; MARGIN-TOP: 12px; HEIGHT: 495px; FONT-SIZE: 12px"><ul style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 14px"><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a10"><img border=0 src="/imgextra/i3/751105631/T2538bXbRNXXXXXXX X_!!751105631.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'1. 第一个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a10','align':{'node':'.ziguang-a10','offset':[0,0] ,'points':['cc','cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=175********&" target=_blank data-attr-replace="[{'type':'href','desc':'1.第一个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-69 2656120.gif"><img border=0 src="/imgextra/i3/751105631/T2538bXbRNXXXXXXX X_!!751105631.jpg" data-attr-replace="[{'type':'src','desc':'1. 第一个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'1. 第一个宝贝标题'}]" data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-69 2656120.gif">此为宝贝标题，请手动输入相关信息</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMILY: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold"data-attr-replace="[{'type':'innerHTML','desc':'1. 第一个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-6 92656120.gif">298.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 14px"><br><DIV style="HEIGHT: 167px"><DIV style="BORDER-BOTTOM: #e0e0e0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #e0e0e0 1px solid; WIDTH: 160px; HEIGHT: 160px; OVERFLOW: hidden; BORDER-TOP: #e0e0e0 1px solid; BORDER-RIGHT: #e0e0e0 1px solid" class="ziguang-game8-pic ziguang-a11"><img border=5 src="/imgextra/i3/751105631/T2icxKXexcXXXXXXXX _!!751105631.jpg" width=160 height=160 data-attr-replace="[{'type':'src','desc':'5. 第二个宝贝小图图片地址（尺寸为310*310像素）'}]"><DIV class="J_TWidget hidden" data-widget-config="{'trigger':'.ziguang-a11','align':{'node':'.ziguang-a11','offset':[0,0] ,'points':['cc','cc']}}" data-widget-type="Popup"><DIV class=ziguang-tanchu-pic><A href="/item.htm?id=14900021738" target=_blank data-attr-replace="[{'type':'href','desc':'5. 第二个宝贝详情页链接地址'}]" data-thumb="/imgextra/i3/T2.UJOXfxXXXXXXXXX-69 2656120.gif"><img border=0 src="/imgextra/i3/751105631/T2icxKXexcXXXXXXXX _!!751105631.jpg" data-attr-replace="[{'type':'src','desc':'5. 第二个宝贝大图图片地址（尺寸为310*310像素）'}]"></A></DIV></DIV></DIV></DIV><DIV style="HEIGHT: 42px" data-attr-replace="[{'type':'innerHTML','desc':'5. 第五个宝贝标题'}]" data-thumb="/imgextra/i2/T27.JOXfJXXXXXXXXX-69 2656120.gif">此为宝贝标题，请手动输入相关信息</DIV><DIV style="TEXT-ALIGN: left; LINE-HEIGHT: 24px; PADDING-LEFT: 70px; FONT-FAMILY: georgia; BACKGROUND: url(/imgextra/i1/T1QIu8XchqXXXi2qbB-848409893.jpg) no-repeat 11px 5px; COLOR: #c00000; FONT-SIZE: 12pt; font-weight: bold" data-attr-replace="[{'type':'innerHTML','desc':'5. 第二个宝贝价格'}]" data-thumb="/imgextra/i3/T2voNOXehXXXXXXXXX-6 92656120.gif">298.00元</DIV></li><li style="WIDTH: 162px; FLOAT: left; MARGIN-LEFT: 24px"></li></ul></DIV><DIV style="TEXT-ALIGN: left; HEIGHT: 10px"></DIV></DIV></DIV></DIV></DIV>店铺装修模板放大镜效果教程1、进入“店铺装修”2、在“店铺装修”页面的点击左侧下面或右侧下面“在此处添加新模板”进入“添加模块”窗口，选择“自定义内容区”点击“添加”3、在添加好的“自定义内容区”点击编辑“编辑HTML源码”（此处新版和旧版有所不同）4、单击后其它按钮为灰色状态，然后粘贴“放大镜效果模板代码”，、5、修改代码（3处）第一处见红字部分：改为你的第一个宝贝小图图片地址（尺寸为310*310像素）第二处见红字部分：改为你的第一个宝贝详情页链接地址第三处见红字部分：改为你的第一个宝贝大图图片地址（尺寸为310*310像素）5、OK，修改完毕，如此类推，每二个宝贝的修改方法6、发布后，效果如下：。

前端开发技术之图片放大镜效果实现

前端开发技术之图片放大镜效果实现在前端开发技术领域，实现图片放大镜效果是一项常见的需求。

这个效果可以提升用户体验，让用户能够更清晰地查看细节。

下面将介绍一种实现图片放大镜效果的方法。

首先，我们需要一个容器来显示原始的图片，并在其上添加放大镜。

在HTML 代码中，我们可以使用`<div>`元素来作为这个容器。

为了使得图片能够被显示在容器中，我们可以使用`<img>`元素，并设置其`src`属性为图片的路径。

然后，我们需要为这个容器添加一些样式，使其能够被正确地显示在网页中。

我们可以设置容器的宽度和高度，以及边框和背景颜色等等。

这里需要注意的是，容器的`position`属性应该被设置为`relative`，这样后续会用到的放大镜元素才能够正确地被定位在容器之上。

接下来，我们需要实现鼠标滑动时的放大效果。

为了实现这个效果，我们需要监听鼠标在容器上的移动事件。

在JavaScript代码中，我们可以使用`addEventListener`函数来为容器添加`mousemove`事件的监听器。

当鼠标在容器上移动时，我们可以通过鼠标的位置计算出放大镜应该显示的部分。

在计算放大镜的位置和显示的部分时，我们需要使用一些数学知识。

我们可以根据鼠标的坐标和容器的大小来计算出放大镜的位置。

同时，我们还需要计算出放大镜显示的部分。

这里可以通过计算鼠标的坐标在容器中的相对位置，并根据放大倍数来计算出对应的显示部分。

在计算完放大镜的位置和显示的部分之后，我们可以将这些结果应用到放大镜元素上。

首先，我们可以通过设置放大镜元素的`left`和`top`属性来定位它的位置。

然后，我们可以设置放大镜元素的背景图片，并通过设置`background-position`属性来设置显示的部分。

最后，我们还需要为容器添加一些交互效果，以增强用户体验。

我们可以添加一些过渡效果，使得放大镜的显示和隐藏更加平滑。

我们也可以添加一些动画效果，使得放大的过程更加生动。

放大镜代码与说明

var m = this.m = maБайду номын сангаасni || {
cont : null, //装载原始图像的div
img : null, //放大的图像
mag : null, //放大框
scale : 15 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
}
}
}
window.onload = function(){
magnifier.init({
cont : document.getElementById('magnifier'),
img : document.getElementById('magnifierImg'),
mag : document.getElementById('mag'),
},
removeIframe:function(elem){
var layers = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
layers[0].parentNode.removeChild(layers[0]);
</select>
</body>
</html>
程序说明
主要为magnifier类,里面的主要方法有：
init：运行方法
start：则是鼠标移入div的事件处理
move：则是鼠标在div中移动的事件处理
end：鼠标移出后的事件处理
程序介绍

实现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原⽣写法********** 希望对⼤家帮助我会继续努⼒的如果有不对的地⽅请⼤家帮忙指出******1 【JS 代码】<script>var oBox = document.getElementById("box");var bigBox = document.getElementById("bigBox");var img = bigBox.getElementsByTagName("img")[0];var mark;// 分别给元素的⿏标进⼊，滑动，滑出绑定⽅法；// 1. ⿏标滑⼊； 1) ：创建出⼩盒⼦ 2) : bigBox 显⽰；oBox.onmouseenter = function () {var smallBox = document.createElement("div");smallBox.id = "mark";this.appendChild(smallBox); // 需要放⼊DOM中，才能⽤document去获取元素；否则当前节点是获取不到的； mark = document.getElementById("mark");// 让⼤盒⼦显⽰bigBox.style.display = "block";}oBox.onmousemove = function (e) {// 计算⼩盒⼦的位置；⼤盒⼦图⽚的位置e = e || window.event;var minL = 0;var maxL = box.offsetWidth/2;var left = e.clientX - box.offsetLeft - mark.offsetWidth/2;var top = e.clientY- box.offsetTop - mark.offsetHeight/2;// 如果left⽐最⼩值还⼩，那么直接让left等于最⼩值即可；如果left⽐最⼤值还⼤，那么直接设置成最⼤值；if(left<minL){left = minL;}else if(left>maxL){left=maxL;}if(top<minL){top = minL;}else if(top>maxL){top = maxL;}// 设置盒⼦的left、top；mark.style.left = left + "px";mark.style.top = top + "px";// mark 的left和img的left存在2倍关系；img.style.left = -2*left + "px";img.style.top = -2*top + "px";}oBox.onmouseleave = function () {// ⿏标离开，移出mark;并且让⼤盒⼦隐藏；this.removeChild(mark);bigBox.style.display= "none";}</script>2 【HTNL部分】<div id="box"><img src="img/iphone.jpg" alt=""></div><div id="bigBox"><img src="img/iphone_big.jpg" alt=""></div>3【CSS部分】<style type="text/css">*{margin: 0;padding: 0;}#box{position: relative;width:350px;height:350px;border: 1px solid black;margin-top:30px;margin-left:50px;float:left;}#box img{width:100%;height:100%;}#bigBox{display: none;position: relative;width:350px;height:350px;border: 1px solid black;margin-top:30px;margin-left:50px;float: left;overflow: hidden;}#bigBox img{position: absolute;width:700px;height:700px;}#mark{position: absolute;width:175px;height:175px;background: rgba(0,0,0,0.3); cursor: move;left:0;top:0;}</style>。

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

java放大镜源程序

/*用java语言编写，在JCeator中运行成功*这是一个放大镜的程序，运行后拖动屏幕左上角的方框，即可以看到放大效果*放大镜的原理：光的折射*/import java.awt.*;import java.awt.event.*;import javax.swing.*;public class Magnifier extends JFrame {private Container container = getContentPane();private int setCoordinateX;private int setCoordinateY;private int absoluteCoordinateX;private int absoluteCoordinateY;private int relativeCoordinateXWhenMousePressed;private int relativeCoordinateYWhenMousePressed;private boolean mousePressedNow;private int magnifierSize = 100;private MagnifierPanel magnifierPanel = new MagnifierPanel(magnifierSize);public Magnifier() {setUndecorated(true);setResizable(false);container.add(magnifierPanel);addMouseListener(new MouseFunctions());addMouseMotionListener(new MouseMotionFunctions());updateSize(magnifierSize);this.setVisible(true);}public static void main(String arg[]) {Magnifier magnifier = new Magnifier();magnifier.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);}public void updateSize(int magnifierSize) {magnifierPanel.setMagnifierSize(magnifierSize + 100);setSize(magnifierSize + 100, magnifierSize + 100);validate();}private class MouseFunctions extends MouseAdapter {public void mousePressed(MouseEvent e) {if (e.getClickCount() == 1) {// 如果鼠标左键点了一下，说明按住了窗体mousePressedNow = true;relativeCoordinateXWhenMousePressed = e.getX();relativeCoordinateYWhenMousePressed = e.getY();}}public void mouseReleased(MouseEvent e) {mousePressedNow = false;}}private class MouseMotionFunctions extends MouseMotionAdapter {public void mouseDragged(MouseEvent e) {if (mousePressedNow == true) {// 如果此时鼠标按下了，说明在拖拽窗体absoluteCoordinateX = Magnifier.this.getLocationOnScreen().x+ e.getX();absoluteCoordinateY = Magnifier.this.getLocationOnScreen().y+ e.getY();setCoordinateX = absoluteCoordinateX- relativeCoordinateXWhenMousePressed;setCoordinateY = absoluteCoordinateY- relativeCoordinateYWhenMousePressed;magnifierPanel.setMagnifierLocation(setCoordinateX,setCoordinateY);setLocation(setCoordinateX, setCoordinateY);}}}}class MagnifierPanel extends JPanel {private Image screenImage;private int magnifierSize;private int locationX;private int locationY;private Robot robot;public MagnifierPanel(int magnifierSize) {try {robot = new Robot();} catch (AWTException e) {}screenImage = robot.createScreenCapture(new Rectangle(0, 0, Toolkit.getDefaultToolkit().getScreenSize().width, Toolkit.getDefaultToolkit().getScreenSize().height));this.magnifierSize = magnifierSize;}public void setMagnifierLocation(int locationX, int locationY) {this.locationX = locationX;this.locationY = locationY;repaint();}public void setMagnifierSize(int magnifierSize) {this.magnifierSize = magnifierSize;}public void paintComponent(Graphics g) {super.paintComponent((Graphics2D) g);g.drawImage(screenImage,0, // 目标矩形的第一个角的x坐标0, // 目标矩形的第一个角的y坐标magnifierSize, // 目标矩形的第二个角的x坐标magnifierSize, // 目标矩形的第二个角的y坐标locationX + (magnifierSize / 4), // 源矩形的第一个角的x坐标locationY + (magnifierSize / 4), // 源矩形的第一个角的y坐标locationX + (magnifierSize / 4 * 3), // 源矩形的第二个角的x坐标locationY + (magnifierSize / 4 * 3), // 源矩形的第二个角的y坐标this);}}。

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>。

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

vue3封装放大镜组件的实例代码

vue3封装放⼤镜组件的实例代码⽬录组件基础结构⽬的：实现图⽚放⼤镜功能安装vueuse功能实现完整代码总结组件基础结构结尾有完整代码可直接复制使⽤⽬的：封装图⽚预览组件，实现⿏标悬停切换效果落地代码：<template><div class="goods-image"><div class="middle"><img :src="images[currIndex]" alt=""></div><ul class="small"><li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}"><img @mouseenter="currIndex=i" :src="img" alt=""></li></ul></div></template><script>import { ref } from 'vue'export default {name: 'GoodsImage',props: {images: {type: Array,default: () => []}},setup (props) {const currIndex = ref(0)return { currIndex }}}</script><style scoped lang="less">.goods-image {width: 480px;height: 400px;position: relative;display: flex;.middle {width: 400px;height: 400px;background: #f5f5f5;}.small {width: 80px;li {width: 68px;height: 68px;margin-left: 12px;margin-bottom: 15px;cursor: pointer;&:hover,&.active {border: 2px solid @xtxColor;}}}}</style>图⽚放⼤镜⽬的：实现图⽚放⼤镜功能步骤：⾸先准备⼤图容器和遮罩容器然后使⽤@vueuse/core的useMouseInElement⽅法获取基于元素的偏移量计算出遮罩容器定位与⼤容器背景定位暴露出数据给模板使⽤落地代码：<template><div class="goods-image">+ // 实现右侧⼤图布局效果（背景图放⼤4倍）+ <div class="large" :style="[{backgroundImage:`url(${images[currIndex]})`}]"></div><div class="middle"><img :src="images[currIndex]" alt="">+ // 准备待移动的遮罩容器+ <div class="layer"></div></div><ul class="small"><li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}"><img @mouseenter="currIndex=i" :src="img" alt=""></li></ul></div></template><script>import { ref } from 'vue'export default {name: 'GoodsImage',props: {images: {type: Array,default: () => []}},setup (props) {const currIndex = ref(0)return { currIndex }}}</script><style scoped lang="less">.goods-image {width: 480px;height: 400px;position: relative;display: flex;+ z-index: 500;+ // 右侧⼤图样式+ .large {+ position: absolute;+ top: 0;+ left: 412px;+ width: 400px;+ height: 400px;+ box-shadow: 0 0 10px rgba(0,0,0,0.1);+ background-repeat: no-repeat;+ background-size: 800px 800px;+ background-color: #f8f8f8;+ }.middle {width: 400px;height: 400px;background: #f5f5f5;+ position: relative;+ cursor: move;+ // 遮罩样式+ .layer {+ width: 200px;+ height: 200px;+ background: rgba(0,0,0,.2);+ left: 0;+ top: 0;+ position: absolute;+ }}.small {width: 80px;li {width: 68px;height: 68px;margin-left: 12px;margin-bottom: 15px;cursor: pointer;&:hover,&.active {border: 2px solid @xtxColor;}}}}</style>安装vueusenpmi@vueuse/********.0⽬前5.3.0版本相对稳定vueuse提供的监听进⼊指定范围⽅法的基本使⽤import { useMouseInElement } from '@vueuse/core'const { elementX, elementY, isOutside } = useMouseInElement(target)⽅法的参数target表⽰被监听的DOM对象；返回值elementX, elementY表⽰被监听的DOM的左上⾓的位置信息left和top；isOutside表⽰是否在DOM的范围内，true表⽰在范围之外。

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的⼤⼩，这样能达到相同的图像范围。

Android 放大镜效果实现

Android 放大镜效果实现放大镜就是直接调用相机，使用放大缩小的功能实现，调用相机有两种方式，一种是直接调用系统的；另一种是自定义相机，需要自定义一个预览界面，下面简单介绍自定义相机方式：参考:/guide/topics/media/camer a.html首先我们需要申请权限：1、获取需要的权限，检测手机是否有相机。

//manifest里添加使用相机的权限//使用相机属性//相机自动对焦12345671234567然后再判断是否有相机存在：/** Check if this device has a camera */private boolean checkCameraHardware(Context context) { if(context.getPackageManager().hasSystemFeature(Packa geManager.FEATURE_CAMERA)){// this device has a camerareturn true;} else {// no camera on this devicereturn false;}}12345678910123456789102.打开相机，官网实现的安全方式打开相机/** A safe way to get an instance of the Camera object. */ public static Camera getCameraInstance(){Camera c = null;try {c = Camera.open(); // attempt to get a Camera instance}catch (Exception e){// Camera is not available (in use or does notexist)}return c; // returns null if camera is unavailable}123456789101112345678910113、创建预览窗口，这是最主要的部分SurfaceView：该类是一个视图组件，实现了照片的预览功能。

CCD放大镜设备操作说明书

一、面板说明：1、CCD 数字高清；2、目镜：3、物镜：4、平面托板；5、液晶显示器；6、控制探照灯开关。

二．操作步骤﹕1.接通所有电源(电压AC220V ﹐50HZ)﹐按一下液晶显示器POWER 按键﹐此时显示器显示屏亮。

2..打开平面托板上之控制探照灯开关﹐调节灯光亮度﹐或者打开环形灯开关﹐(两种灯具视待观对象而选择)3.选择适当之放大倍数﹕放大倍数公式为﹕(目镜*物镜*59.2*19)/14 物镜項目 0.7 1 1.5 2 2.5 3 3.5 4 4.5放大倍數28.1 40.1 60.2 80.3 100.4 120.5 140.6 160.6 180.7說明﹕目鏡為0.5﹐59.2為14寸放大鏡的倍數﹐19為現在顯示屏的尺寸。

5、液晶顯示器1、CCD 数字（高清） 2、目鏡3、物鏡4、平面托板6、控制探照燈開關4.将待观对象放置于平面托板上物镜之下方。

5..调节升降座高度﹐使显示器明显显示待观物中之图像。

三．CCD 数字（高清）-VGA 相机的说明与调试﹕ 1、VGA 相机图片说明：2、VGA 相机的调试：1.用手按一次“MEMU ”键显示如下图片：1.MEMU ：主菜单2.POWER ：电源键2.然后再按一下“﹢”键后显示如下图片：3、此时可以用“▲/▼”键对亮度，对比度，色饱和度，锐度，蓝色偏移量，红色偏移量进行图像的选择。

4、当选择以上任一个项目时可用“﹢/﹣”键进行图像适当的调整。

5、当调整完毕后可选择“退出”项目，然后再按一下“﹢”或“MEMU”键就可退出调试界面。

四．注意事项﹕1.需要搬动时﹐必须小心﹐轻放﹐切断电源﹔2.整台CCD放大检测系统使用电压为AC220V﹐50HZ﹔3.应平放于无震动的地方﹐避免日光直射之下﹔4.保持表面清洁﹐不得用腐蚀性液体擦抹任何部位﹔5.液晶显示器面板为敏感材料制造﹐不要用任何物品碰击﹔6.长期不使用本机时﹐请拔出交流电源插头﹔7.本说明书未提到之处﹐非专业人员不得乱动﹔8.出现任何故障﹐及时通知设备工程进行排除。

基于jQuery仿淘宝产品图片放大镜代码分享

基于jQuery仿淘宝产品图⽚放⼤镜代码分享这篇⽂章主要介绍了jQuery淘宝产品图⽚放⼤镜特效，⿏标点击图⽚，图⽚放⼤，特别适合图⽚细节展⽰，感兴趣的⼩伙伴可以参考下。

(1)html代码：<div class="box"><div class="tb-booth tb-pic tb-s310"><a href="images/01.jpg"><img src="images/01_mid.jpg" alt="美⼥" rel="images/01.jpg" class="jqzoom" /></a></div><ul class="tb-thumb" id="thumblist"><li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div></li></ul></div>(2)css代码：html{overflow-y:scroll;}body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}div,ul,li{padding:0; margin:0;}li{list-style-type:none;}img{vertical-align:top;border:0;}/* box */.box{width:310px;margin:100px auto;}.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}.tb-pic a img{vertical-align:middle;}.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}.tb-thumb{margin:10px 0 0;overflow:hidden;}.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}.tb-s310, .tb-s310 a{height:310px;width:310px;}.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}.tb-s310 a{*font-size:271px;}.tb-s40 a{*font-size:35px;}.tb-s40, .tb-s40 a{height:40px;width:40px;}.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}.tb-thumb li div{border:1px solid #CDCDCD;}div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;} div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}本⽂实例讲述了jQuery淘宝产品图⽚放⼤镜特效。

练习60放大镜效果

练习60 放大镜效果一、练习具体要求本练习制作放大镜效果的实例。

如图60-1所示，程序执行后，创建一个能够加载图片的面板，用户可以利用鼠标对图片的细节进行放大观察。

放大镜的大小可以在magnifier.html 文件里通过参数进行设置。

二、程序及注释（1）编程思路：首先，本练习因为要制作放大镜效果的实例，所以首先要生成程序界面：在函数public void init()中，首先通过语句getImage(getCodeBase(), getParameter("IMAGE")) 返回图片的路径，然后通过语句MediaTracker mediatracker = new MediaTracker(this)实例化MediaTracker对象，最后通过语句mediatracker.addImage(im, 0)加载图片。

然后，为了实现放大镜效果，所以要进行屏幕操作，首先通过函数public void preparepaint()做画屏准备工作，然后在public boolean mouseMove(Event event, int i, int j)函数里响应鼠标移动，通过调用函数preparepaint()和函数repaint()实现放大镜效果。

（2）程序实现及注释：//magnifier.javaimport java.applet.Applet;import java.applet.AppletContext;import java.awt.*;import java.awt.image.MemoryImageSource;import java.awt.image.PixelGrabber;import java.io.PrintStream;import .MalformedURLException;import .URL;public class magnifier extends Applet{//变量定义Image resultimage = null;Image im = null;Image bgi = null;int xfrom = 0;int yfrom = 0;int spot = 0;int spot2 = 0;PixelGrabber pg = null;int pixs[] = null;int pixr[] = null;int w = 0;int h = 0;int spot2spot = 0;MemoryImageSource ms = null;Graphics bgg = null;//初始化小程序public void init(){im = getImage(getCodeBase(), getParameter("IMAGE"));MediaTracker mediatracker = new MediaTracker(this);mediatracker.addImage(im, 0);showStatus("Loading image, please wait...");try{mediatracker.waitForAll();}catch(InterruptedException interruptedexception){System.out.println("InterruptedException:" + interruptedexception);}w = im.getWidth(this);h = im.getHeight(this);String s = getParameter("SIZE");if(s != null)try{spot = Integer.parseInt(s);}catch(NumberFormatException numberformatexception){System.out.println("Check SIZE parameter, NumberFormatException " + numberformatexception);}spot2 = spot << 1;spot2spot = spot * spot;resultimage = createImage(spot2, spot2);pixs = new int[w * h];pixr = new int[spot2 * spot2];pg = new PixelGrabber(im, 0, 0, w, h, pixs, 0, w);try{pg.grabPixels();}catch(InterruptedException interruptedexception1){System.out.println("InterruptedException in PixelGrabber"+ interruptedexception1);}ms = new MemoryImageSource(spot2, spot2, pixr, 0, spot2);bgi = createImage(w, h);bgg = bgi.getGraphics();xfrom = (int)(Math.random() * (double)(w - spot2));yfrom = (int)(Math.random() * (double)(w - spot2));preparepaint();}//刷新屏幕public void update(Graphics g){paint(g);}//准备画屏函数public void preparepaint(){if(xfrom < 0)xfrom = 0;if(xfrom > w - spot2)xfrom = w - spot2;if(yfrom < 0)yfrom = 0;if(yfrom > h - spot2)yfrom = h - spot2;for(int j = -spot; j < spot; j += 2){int l = j * spot2 + spot + (spot2spot << 1);int k = j * j;int i1 = ((j >> 1) + spot + yfrom) * w + spot + xfrom;int j1 = (int)Math.sqrt(spot2spot - k);for(int i = -j1; i < j1; i += 2)pixr[l + i + spot2] = pixr[l + i + 1 + spot2] = pixr[l + i] = pixr[l + i + 1] = pixs[i1 + (i >> 1)];}resultimage = createImage(ms);}//画屏函数public void paint(Graphics g){bgg.drawImage(im, 0, 0, this);bgg.drawImage(resultimage, xfrom, yfrom, this);g.drawImage(bgi, 0, 0, this);}//响应鼠标进入public boolean mouseEnter(Event event, int i, int j){showStatus(getParameter("LINK"));return true;}//响应鼠标离开public boolean mouseExit(Event event, int i, int j){showStatus("");return true;}//响应鼠标弹开public boolean mouseUp(Event event, int i, int j){String s = getParameter("LINK");if(s != null)try{URL url = new URL(getDocumentBase(), s);getAppletContext().showDocument(url, "_self");}catch(MalformedURLException malformedurlexception){System.out.println("Please, check LINK parameter"+ malformedurlexception);}return true;}//响应鼠标移动public boolean mouseMove(Event event, int i, int j){xfrom = i - spot;yfrom = j - spot;preparepaint();repaint();return true;}//构造函数public magnifier(){spot = 30;}}三、练习效果（如图60-1所示）本实例代码编写完毕，存盘为：C: j2sdk1.4.0\javaprograms\ magnifier.java。

放大镜的算法

放大镜的算法：//如图：蓝色部分相当于舞台，也就是放小图的地方，蓝色部分的的注册点是放在左上角的，注册点和左上角是致的，这个时候算法就简单些，如下：蓝色区域就是影片的显示区域，显示的是我们要放大的图片（小图），绿色区域是放大的要被遮罩的图片。

如果此时鼠标在小图中红点处（x,y)，则该点在放大后的图片中的坐标就应该是（x*scale,y*scale)，scale是图片的放大倍数。

只要在显示时使小图中的该点与大图中的重合，我们就可以在这个效果中实现无论鼠标指到哪里，显示的放大图像都以鼠标所指像素点为中心了。

很显然，此时大图相对影片区域的坐标为：（x1= x -x*scale,y1= y -y*scale)：//做完此效果后，我必须强调下：此效果的要求是元件的注册点一定要放在左上角，而且要与舞台的注册点重合，这样才会有效果；jin_mc.x=mouseX;jin_mc.y=mouseY;mc1.x=mouseX-n*mouseX;mc1.y=mouseY-n*mouseY;//接下来我们来看另一种算法：如图：//通过学习可以看出：当注册点在左上角时，由于小图是放在场景左上角的，自己的注册点也是放在场景左上角，所以放大镜与小图坐标之间的距离就是mouseX和mouseY;而当注册点不在左上角时，这个距离就需要求出来（dx，dy），那么放大的倍数也可以求出来，同上面一样，下代码：jin_mc.x=mouseX;jin_mc.y=mouseY;//求出鼠标与小图之间的距离；那么当前放大的点与小图注册点之间的距离就是n*dx;就是上个效果所说的n*mouseX这么简单了；dx=mouseX-mc0.x;dy=mouseY-mc0.y;mc1.x=mouseX-n*dx;mc1.y=mouseY-n*dy;//以上效果是适用于任意放大镜效果的；以任意点为中心放大图：//在理解了第二种放大镜效果的基础上，那么下面这个效果也就不难了，这个效果其实很眩，至少我很喜欢。