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

最新推荐文章于 2023-03-31 13:39:30 发布

Unicorn-xueya.

最新推荐文章于 2023-03-31 13:39:30 发布

阅读量245

点赞数 2

本文链接：https://blog.csdn.net/xue_smail/article/details/89607558

版权

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

一、放大镜实现思路：
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>

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

Unicorn-xueya.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原声js和jQuery写放大镜小案例及思路！

放大镜效果，被广泛的应用于商城的商品展示，其效果相比大家都不陌生。其原理也不是很难，那么今天就实现下放大镜效果！一、放大镜实现思路：1、需要一个大盒子和一个小盒子放图片；2、两个盒子放入的是同一张图片；3、小盒子里还需放入一个div相当于是放大镜；4、隐藏大图片的盒子和放大镜的盒子；5、当鼠标移上去是步骤4显示，离开时步骤4消失；6、放大镜的移动事件；7、判断让放大镜移不出盒子；...
复制链接

扫一扫