原生射流研究…实现简单放大镜效果

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

html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' * { margin : 0；padd : 0；} img{垂直对齐：顶部；} .fdj {宽度： 350px高度： 350像素；相对位置：余量： 100像素自动；border: 1px固体盖恩斯伯勒}。小{位置：相对；} .小img { width: 350px}。掩模{宽度： 100像素高度： 100像素；背景： rgba(255，255，0，0.4)；绝对位置：左： 0；top : 0；光标：移动；显示器：无；} .大{位置：绝对值；top : 0；左侧： 360px宽度： 500像素；高度： 500像素；border: 1px固体盖恩斯伯勒飞越：隐藏；显示器：无；} .大img{ position:绝对值；左： 0；top : 0；}/style/head body div class=' fdj ' div class=' small ' img src=' http :http://cdn。附上。qdfuns。com/notes/pics/201702/08/162503 mw0 fawb 5 b 02 va 22 I . jpg '/div class=' mask '/div/div class=' big ' img src=' http 3360http://cdn。附上。qdfuns。commdj ')//获得最大的盒子var small=文档。queryselector(' .小');//获取小图片盒子var big=document.querySelector(' .大');//获取大图片盒子var bigs=big.children[0] //大图片var smalls=small.children[0] //小图片var mask=小。孩子[1]；//遮罩//鼠标移入小图片盒子很小。onmouseover=function(){//鼠标移入图片盒子将遮罩与大图片显示面具。风格。display=' block很大。风格。display=' block};//鼠标移出小图片盒子small.onmouseout=function() { //鼠标移出小图片盒子将遮罩与大图片隐藏面具。风格。显示='无'；很大。风格。显示='无'；};var x=0；var y=0；//鼠标在小图片上移动时很小。onmousemove=function(ev){ var ev=event | | window。事件；//让鼠标在遮罩正中//鼠标X坐标与Y坐标x=ev。client x-这个。offsetparent。偏移遮罩。offset withts/2；y=ev。客户-这个。偏移父级。偏移顶部遮罩。偏移心/2；//将遮罩限制在小图片盒子中if(x0){ x=0；} else if(xsmall。偏移掩码。offset witth){ x=小。偏移掩码。偏移；} if(y0){ y=0；} else if(ys mall。胶印热掩模。抵消热量){ y=小。胶印热掩模。偏移热}掩模。风格。left=x ' px面具。风格。top=y ' px//大图与小图的比例/* var scalX=bigs.offsetWidth/small.offsetWidth; var scale=bigs.offsetHeight/small.offsetHeight;*/var scalX=x/(小。面具之外。偏移)；var scaled=y/(小。胶印热掩模。抵消热量)；大块头。风格。left=-(x * SCLx)' px '；大块头。风格。top=-(y * Scale)' px '；};/script/html效果图：(演示)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。