原声js和jQuery写放大镜小案例及思路！

╰+攻爆jí腚メ 2022-02-13 10:59 197阅读 0赞

放大镜效果，被广泛的应用于商城的商品展示，其效果相比大家都不陌生。其原理也不是很难，那么今天就实现下放大镜效果！

**一、放大镜实现思路：**  
1、需要一个大盒子和一个小盒子放图片；  
2、两个盒子放入的是同一张图片；  
3、小盒子里还需放入一个div相当于是放大镜；  
4、隐藏大图片的盒子和放大镜的盒子；  
5、当鼠标移上去是步骤4显示，离开时步骤4消失；  
6、放大镜的移动事件；  
7、判断让放大镜移不出盒子；  
8、使放大镜到盒子的左边距、右边距等于小盒子定位的左、右距离；  
9、大盒子里的图片跟着放大镜的移动也移动（逆向思维）。

**二、代码部分：**  
首先来看下jQuery写的放大镜：

jQuery中的css部分：
    <style type="text/css">
    .box{
    width:400px;
    margin: 0 auto;
    }
    .smallbox{
    width: 100px;
    height: 100px;
    border: 1px solid #009494;
    float: left;
    position: relative;
    }
    .smallbox img{
    width:100px;
    height: 100px;
    position:absolute;
    }
    .position_box{
    width: 50px;
    height: 50px;
    background: blue;
    opacity: 0.3;
    position: absolute;
    display: none;
    }
    .bigbox{
    width:150px;
    height: 150px;
    border: 1px solid #009494;
    position: relative;
    float: left;
    display: none;
    overflow: hidden;
    }
    .bigbox img{
    width:300px;
    height: 300px;
    position: absolute;
    }
    </style>

Query中内容部分：
    <body>
    <div class="box">
    <div class="smallbox" id="_smallbox">
    <img src="images/shoubiao.jpg">
    <div class="position_box" id="_position_box"></div>
    </div>
    <div class="bigbox" id="_bigbox">
    <img src="images/shoubiao.jpg" id="bigImg">
    </div>
    </div>
    </body>

jQuery中script部分：
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		//鼠标移入移出事件；
    		$(_smallbox).hover(function(){
    			$(_position_box).css("display","block");
    			$(_bigbox).css("display","block");
    		},function(){
    			$(_position_box).css("display","none");
    			$(_bigbox).css("display","none");
    		})
    
    		//放大镜移动事件
    		$(_position_box).mousemove(function(e){
    			var e = e || event;
    			var x = e.clientX - $(_smallbox).offset().left - $(_position_box).width()/2;
    			var y = e.clientY - $(_smallbox).offset().top - $(_position_box).height()/2;
    			// console.log(x);
    			// console.log(y);
    			if (x < 0) {
    				x = 0;
    			};
    			if (y < 0) {
    				y = 0;
    			};
    			if (x > $(_smallbox).width() - $(_position_box).width()){
    				x = $(_smallbox).width() - $(_position_box).width();
    			};
    			if (y > $(_smallbox).height() - $(_position_box).height()) {
    				y = $(_smallbox).height() - $(_position_box).height()
    			};
    
    			$(_position_box).css({"left":(x) + 'px',"top":(y) + 'px'})
    			$(bigImg).css({"left":(-x)*3 + 'px',"top":-(y)*3 + 'px'})
    		})
    	})
    </script>

***接下来看看原生js放大镜，由于原声js中的css样式和内容都一样，就不贴了，看script部分吧。***

原生js的script部分：
    <script type="text/javascript">
    	_leftBox.onmouseover = function(){	//鼠标移上去事件
    		mark.style.display = "block";	//显示出mark,也就相当于放大镜。
    		_rightBox.style.display = "block";	//显示出放大后的图片。
    	}
    	_leftBox.onmouseout = function(){	//鼠标移出事件
    		mark.style.display = "none";	//隐藏放大镜
    		_rightBox.style.display = "none";	//隐藏放大后的图片
    	}
    
    	mark.onmousemove = function(e){		//放大镜的移动事件
    		var e = e || event;				//获取鼠标的位置
    		// console.log(e);
    		var x = e.clientX - _leftBox.offsetLeft - mark.offsetWidth/2;	//获取放大镜到它父级的左边距
    		var y = e.clientY - _leftBox.offsetTop - mark.offsetHeight/2;	//获取放大镜到它父级的上边距
    		// console.log(x);
    		// console.log(y);
    
    		if (x < 0) {
    			x = 0;
    		}
    		if (y < 0) {
    			y = 0;
    		}
    		if (x > _leftBox.offsetWidth - mark.offsetWidth) {       //为了让放大镜不溢出盒子，所以对它进行了判断
    			x = _leftBox.offsetWidth - mark.offsetWidth
    		}
    		if (y > _leftBox.offsetHeight - mark.offsetHeight) {
    			y = _leftBox.offsetHeight - mark.offsetHeight
    		}
    
    		mark.style.top = y + "px";					//放大镜到它父级的左边距赋给小盒子定位的左距离
    		mark.style.left = x + "px";					//获取放大镜到它父级的上边距赋给小盒子定位的上距离
    
    		_rightImg.style.top = -y * 3 + "px";		//逆思维，当放大镜右移时，大图右移（同理），所以是负值，放大3倍；
    		_rightImg.style.left = -x * 3 + "px";		//逆思维，当放大镜下移时，大图上移（同理），所以是负值，放大3倍；
    
    	}
    </script>

**这就实现了放大镜的效果，希望可以得到大神的指点，无论是代码质量还是代码风格，亦或是有更好的实现方法，都请您提出宝贵建议！**