原生射流研究…实现放大镜特效

本文实例为大家分享了射流研究…实现放大镜特效的具体代码，供大家参考，具体内容如下

掌握页面元素定位和移动

放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置

技术点：事件捕获、定位

offsetLeft与样式。左侧的对比：1)偏移是与父级元素的距离，不包过滚动条的距离2)样式。左侧返回的是字符串，如30px，offsetLeft返回的是数值style.lft是可读写的，offsetLeft是只读的，所以要改变差异的位置只能修改style.left4)style.left的值需要事先定义，否则取到的值为空难点：计算：如何让小图片的放大镜和大图片同步移动

距离定位图解：

具体代码：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head style type=' text/CSS ' * { margin : 0；padd : 0；} #演示{ display:块宽度： 400像素；高度： 255像素；余量： 50px相对位置：border: 1px固体# ccc} #小方框{ position : relativez-index : 1；} #浮动框{显示：无；宽度： 160像素；高度： 120像素；绝对位置：背景# ffffccborder: 1px固体# cccfilter: alpha(不透明度=50);opacity: 0.5 } #标记{位置：绝对显示：块；宽度： 400像素；高度： 255像素；背景-color : # fff；filter: alpha(不透明度=0);opa城市3360 0；z指数： 10；} #大盒子{ display : none绝对位置：top : 0；左侧： 460px宽度： 400像素；高度： 300像素飞越：隐藏；border: 1px固体# cccz-index : 1；} # big-box img {位置：绝对值；z指数： 5；}/style脚本窗口。onload=function(){ var $=function(id){ return document。getelementbyid(id)；} var Demo=$(' Demo ')；var smolbox=$('小盒子')；var Mark=$(' Mark ')；var float box=$(“float-box”)；var BigBox=$(' big-box ')；var bigbox image=bigbox。getelementsbytagname(' img ')[0]；马克。onmouseover=function(){ float box。风格。display=' block大盒子。风格。display=' block}马克。onmouseout=function(){ float box。风格。显示='无'；大盒子。风格。显示='无'；}马克。onmousemove=function(e){ var _ event=e | | window。事件/兼容多个浏览器的参数模式var left=_ event。clientx-demo。小盒子。offsetleft-FloatBox.offsetWidth/2; var top=_ event。客户演示。小盒子。offsettop-FloatBox.offsetHeight/2; if(左0){ left=0；} else if(左标记。带-float框的偏移量。偏移量为){ left=mark。带-float框的偏移量。用.抵消；} if(top 0){ top=0；} else if(最高分。偏移右浮动框。向右偏移){ top=mark。偏移右浮动框。向右偏移；}浮箱。风格。left=left ' px浮箱。风格。top=top“px”；var percentX=左/(标记。浮箱。偏移)；var percentY=top/(标记。偏移右浮动框。偏移光线)；大盒子图像。风格。left=-percentX *(bigbox图像)。offset with-big box。offsetwithts)' px '；大盒子图像。风格。top=-percentY *(bigbox图像)。偏移灯箱。offset theight)' px '；} }/scriptbodydiv id=' demo ' div id=' small-box ' div id=' mark '/div div id=' float-box '/div img src=' http : img/macbook-small。jpg '/div id=' big-box ' img src=' http : img/macbook-big。jpg '/div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。