原生射流研究…仿淘宝网商品放大镜效果

效果图：(实例图片由自己添加)

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题仿淘宝放大镜特效/title style type=' text/CSS ' * { margin : 0；padd : 0；} #演示{ width:350px高度：350 pxborder: 1px固体# 000;位置：相对；余量：100px} # smil _ box {宽度： 350px高度： 350像素；位置：相对；} #遮罩{ width:175px高度： 175像素；background:rgba(255，255，0，0.4)；位置：绝对；top :0 left :0 display : none cursor : move } # big _ box { width : 400 px高度： 400像素；位置：绝对；top :0 left :360 pxborder : 1px固体# 000;飞越：隐藏；display : none } # big _ box img { position :绝对值；top :0 left :0 }/style/head body div id=' demo ' div id=' smil _ box ' img src=' http 3360http://www .qd funs。com/misc . PHP？mod=attach gender=editor aid=193662 BAF 63738 c 68 b 594 F3 EC 920769 f ' height=' 350 ' width=' 350 ' alt=' div id=' mask '/div/div id=' big _ box ' img src=' http 3360http://www .qd uns。com/misc . PHP？mod=attach gender=editor aid=3e 8 b 3554 EB 90 DD 13 fa 0 f 82465 AC 6d 382 '高度='800 '宽度=' 800 ' alt=' id=' big _ img '/div/div/body脚本类型=' text/JavaScript '(函数(窗口){ function $(id){返回文档。getelementbyid(id)；};//获取对象var demo=$('demo ')、smilBox=$('smil_box ')、mask=$('mask ')、bigImg=$('big_img ')、big box=$(' big _ box ')；//smilBox的盘旋事件微笑盒子。onmouseover=function(){ mask。风格。display=' block大盒子。风格。display=' block};微笑盒子。onmouseout=function(){ mask。风格。显示='无'；大盒子。风格。显示='无'；};//鼠标移动事件微笑盒子。onmousemove=function(event){ var event=event | | window。事件；//获取鼠标在页面上的坐标var pageX=事件。pageX | |事件。客户端x文档。文档元素。被偷窃；var pageY=事件。pageY | |活动。客户文件。文档元素。滚动顶部；//掩码的位置坐标var BoxX=PageX-demo。offsetleftvar BoxY=Pagey-demo。偏移顶部；var maskX=BoxX-mask。偏移量为/2；var maskY=BoxY-mask。偏移高度/2；//限制面具的移动范围if(maskX 0){ maskX=0；};if(maskX smilbox。带-mask的偏移量。偏移量为){ maskX=smilbox。带-mask的偏移量。用.抵消；};if(MaSky 0){ MaSky=0；};if(maskY smilbox。偏置心脏面罩。偏移心){ maskY=smilbox。偏置心脏面罩。偏移心；};//黄色遮罩层的位置坐标面具。风格。top=MaSky ' px面具。风格。left=maskX ' px//大图片移动的比例var prop=(大img。用-bigbox进行偏移。偏移量为)/(smilbox。带-mask的偏移量。用)偏移；//大图片的坐标var big imgx=prop * maskXvar big imgy=prop * maskYbig img。风格。top=-big imgy ' px '；大img。风格。left=-big imgx ' px '；} })(窗口)/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！