原生js简单实现放大镜特效教程

普及知识：放大镜特效涉及到的几个值

offsetWidth    获取元素的宽度
offsetHeight  获取元素的高度
offsetLeft父元素没有定位时，获取元素距离页面的左边距，父元素有定位时，获取元素距离父元素的左边距
offsetTop父元素没有定位时，获取元素距离页面的上边距，父元素有定位时，获取元素距离父元素的上边距
scrollTop  内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove  鼠标移动事件
onmouseover  鼠标划过事件

主要思路：

1.鼠标移动，阴影区跟着移动
    2.鼠标移动，大图也跟着移动
    3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
    4.保证阴影区域以及大div.big在鼠标移动到div.small时显示

html实现

<div id="fangdajing"> <div class="small"> <img src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.3lian.com/edu/2017/05-16/"small.jpg"" alt=""> <div class="shadow"></div> </div> <div class="big"> <img src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.3lian.com/edu/2017/05-16/"big.jpg"" alt=""> </div> </div>

css样式

//定位，大图显示区域和阴影区域最开始不显示 #fangdajing{ width:450px; height:450px; position:relative; } .small{ width:450px; height:450px; position:absolute; left:0px; top:0px; } .shadow{ width:200px; height:200px; background:yellow; opacity:0.3; position:absolute; top:0; left:0; display:none; } .big{ position:absolute; left:450px; width:356px; height:356px; overflow:hidden; display:none; }

js实现

1.获取对象

var fdj=document.getElementById('fangdajing'); var big=document.getElementsByClassName('big')[0]; var small=document.getElementsByClassName('small')[0]; var shadow=document.getElementsByClassName('shadow')[0];

2.鼠标的移入移出事件，当鼠标移入的时候，显示大图显示区以及阴影区域

small.onmouseover=function(){ big.style.display='block'; shadow.style.display='block'; }

3.

（1）鼠标移动，div.shadow跟着移动，先获取到shadow在small内的相对位置，已知鼠标点击位置距离页面的边距，fdj距离页面的边距，fdj以及shadow的宽高，让鼠标划过的位置一直位于shadow区域的中心点，所以可得shadow在small内的相对位置，之后进行判断，让shadow不能出边界，最后进行赋值操作

（2）shadow区域移动，大图显示相应的位置，即大图滚动相应的距离，大图和shadow的比例为big.offsetWidth/shadow.offsetWidth，以shadow的左上角为准，大图的滚动距离为left*相应比例

small.onmousemove=function(ent){ var e=ent || event; //获取鼠标事件对象 var left=e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //获取shadow在small内的相对位置 var top=e.pageY - fdj.offsetTop - shadow.offsetHeight/2; var tw=fdj.offsetWidth - shadow.offsetWidth; //获取shadow最大可移动距离 var th=fdj.offsetHeight - shadow.offsetHeight; //对shadow进行限制 if(left < 0){ left=0; }else if(left > tw){ left=tw; } if(top < 0){ top=0; }else if(top > th){ top=th; } //赋值 small.style.left=left + 'px'; small.style.top=top + 'px'; //大图跟着移动 var sl=left * big.offsetWidth / shadow.offsetWidth; var st=top * big.offsetHeight / shadow.offsetHeight; big.scrollTop=st; big.scrollLeft=sl; }

4.鼠标移出，大图以及shadow隐藏

small.onmouserout=function(){ big.style.display='none'; shadow.style.display='none'; }