js 基础 ---实现放大镜的效果

最新推荐文章于 2023-08-30 23:12:02 发布

Web攻城狮

最新推荐文章于 2023-08-30 23:12:02 发布

阅读量9.1k

点赞数 13

分类专栏： js 文章标签： js 基础 ---实现放大镜的效果 javascript js 放大镜

本文链接：https://blog.csdn.net/b1244154318/article/details/51946922

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

js 基础 ---实现放大镜的效果

能利用原生的js是非常重要的，所以对于仿照电商的商品放大图做出了这个放大镜

的效果。在这个例子中，放大镜跟随着鼠标的移动而移动，大盒的图片移动方向与小盒子图片的移动方向是相反的，它们的放缩比例是相同的,具体的实现案例如下：

第一种方法：

<!DOCTYPE html>
	<html>
	<head>
		<title>放大镜效果</title>
		<meta charset="utf-8">
		<style type="text/css">
		body{position: relative;}
		*{margin: 0;padding:0;}
		#Box{
			height:300px; 
			width:300px;
			position: relative;
			border:1px solid gray;
		}
		#bigBox{
			height:300px; 
			width:300px;
			position: absolute;
			top:0;
			left:310px;
			overflow: hidden;
			display:none;
			border: 1px solid gray;
		}
		#Box img{
			height:300px; 
			width:300px;
			}
		#lay{
			background:#fff;
			border:1px solid gray;
			position: absolute;
			top:0;
			left: 0;
			opacity:0.5;
			display:none;
			filter:alpha(opacity=50);
		}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var Box = document.getElementById("Box");
				var bigBox = document.getElementById("bigBox");
				var bigbox = getChildNodes(bigBox)[0];
				var lay = document.getElementById("lay");
				//鼠标移入时，将放大镜和bigBox显示出来
				Box.onmouseover = function(){
					lay.style.display = "block";
					bigBox.style.display = "block";
				}
				//鼠标移出时，将放大镜和bigBox隐藏起来
				Box.onmouseout = function(){
					lay.style.display = "none";
					bigBox.style.display = "none";
				}
				Box.onmousemove = function(e){
					e = e || event;//事件源的兼容问题
					var scale = 4;//图片的放缩比例
					//将鼠标放到放大镜的中间
					var x = e.clientX - lay.offsetWidth/2;
					var y = e.clientY - lay.offsetHeight/2;
					//将放大镜的宽高与盒子的宽高结合起来按比例放缩
					lay.style.width = parseInt(Box.offsetWidth / scale )+ "px";
					lay.style.height = parseInt(Box.offsetHeight / scale)+ "px";
					//设置大盒子的宽高
					bigbox.style.width = Box.offsetWidth * scale + "px";
					bigbox.style.height = Box.offsetHeight * scale + "px";
					if(x < 0){
						x = 0;//左边界的判断，当超出时将x置为0;
					}
					//右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;
					if( x >= Box.offsetWidth - lay.offsetWidth){
						x = Box.offsetWidth - lay.offsetWidth;
					}
					//下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;
					if( y >= Box.offsetHeight - lay.offsetHeight){
						y = Box.offsetHeight - lay.offsetHeight;
					}
					if(y < 0){
						y = 0;//上边界的判断，当超出时将y置为0;
					}
					lay.style.left = x + "px";
					lay.style.top = y + "px";
					//同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的
					 var left = lay.offsetLeft * scale;
					 var top  = lay.offsetTop * scale ;
					bigbox.style.marginLeft =(left * (-1)) + "px";
					bigbox.style.marginTop =(top * (-1))+ "px";

					
				}
				
			}
			//获取孩子的节点
			function getChildNodes(element){
 				var arr = [];
	 			var eList = element.childNodes;
	 			for(var i = 0;i < eList.length;i++){
	 				if(eList[i].nodeType == 1){//过滤空白节点
	 					arr.push(eList[i]); 
	 				}
	 		     } 
	 		     return arr;
	 	    }
		</script>
		
	</head>
	<body>
		<div id="Box">
			<img  src="1.jpg"/>
			<span id="lay"></span>
		</div>
		<div id="bigBox">
			<img  src="1.jpg" />
		</div>
	</body>
	</html>

第二种方法是：运用children属性获取孩子

<!DOCTYPE html>
	<html>
	<head>
		<title>放大镜效果</title>
		<meta charset="utf-8">
		<style type="text/css">
		body{position: relative;}
		*{margin: 0;padding:0;}
		#Box{
			height:300px; 
			width:300px;
			position: relative;
			border:1px solid gray;
		}
		#bigBox{
			height:300px; 
			width:300px;
			position: absolute;
			top:0;
			left:310px;
			overflow: hidden;
			display:none;
			border: 1px solid gray;
		}
		#Box img{
			height:300px; 
			width:300px;
			}
		#lay{
			background:#fff;
			border:1px solid gray;
			position: absolute;
			top:0;
			left: 0;
			opacity:0.5;
			display:none;
			filter:alpha(opacity=50);
		}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var Box = document.getElementById("Box");
				var bigBox = document.getElementById("bigBox");
				var bigbox = bigBox.children[0];
				var lay = document.getElementById("lay");
				//鼠标移入时，将放大镜和bigBox显示出来
				Box.onmouseover = function(){
					lay.style.display = "block";
					bigBox.style.display = "block";
				}
				//鼠标移出时，将放大镜和bigBox隐藏起来
				Box.onmouseout = function(){
					lay.style.display = "none";
					bigBox.style.display = "none";
				}
				Box.onmousemove = function(e){
					e = e || event;//事件源的兼容问题
					var scale = 4;//图片的放缩比例
					//将鼠标放到放大镜的中间
					var x = e.clientX - lay.offsetWidth/2;
					var y = e.clientY - lay.offsetHeight/2;
					//将放大镜的宽高与盒子的宽高结合起来按比例放缩
					lay.style.width = parseInt(Box.offsetWidth / scale )+ "px";
					lay.style.height = parseInt(Box.offsetHeight / scale)+ "px";
					//设置大盒子的宽高
					bigbox.style.width = Box.offsetWidth * scale + "px";
					bigbox.style.height = Box.offsetHeight * scale + "px";
					if(x < 0){
						x = 0;//左边界的判断，当超出时将x置为0;
					}
					//右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;
					if( x >= Box.offsetWidth - lay.offsetWidth){
						x = Box.offsetWidth - lay.offsetWidth;
					}
					//下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;
					if( y >= Box.offsetHeight - lay.offsetHeight){
						y = Box.offsetHeight - lay.offsetHeight;
					}
					if(y < 0){
						y = 0;//上边界的判断，当超出时将y置为0;
					}
					lay.style.left = x + "px";
					lay.style.top = y + "px";
					//同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的
					 var left = lay.offsetLeft * scale;
					 var top  = lay.offsetTop * scale ;
					bigbox.style.marginLeft =(left * (-1)) + "px";
					bigbox.style.marginTop =(top * (-1))+ "px";

					
				}
				
			}
			
		</script>
		
	</head>
	<body>
		<div id="Box">
			<img  src="1.jpg"/>
			<span id="lay"></span>
		</div>
		<div id="bigBox">
			<img  src="1.jpg" />
		</div>
	</body>
	</html>

Web攻城狮

关注

13
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
js 基础 ---实现放大镜的效果

js 基础 ---实现放大镜的效果能利用原生的js是非常重要的，所以对于仿照电商的商品放大图做出了这个放大镜的效果。在这个例子中，放大镜跟随着鼠标的移动而移动，大盒的图片移动方向与小盒子图片的移动方向是相反的，它们的放缩比例是相同的,具体的实现案例如下：第一种方法：放大镜效果 body{position: relative;} *{ma
复制链接

扫一扫