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

本文实例为大家分享了js实现放大镜特效展示的具体代码，供大家参考，具体内容如下普及

本文实例为大家分享了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="small.jpg" alt="">
 <div class="shadow"></div>
 </div>
 <div class="big">
 <img src="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'; 
 }

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