图片中心放大原理

本是古典何须时尚 2022-03-20 07:47 266阅读 0赞

九宫格图片布局也是一些常见的布局，点击图片的时候图片会放大原来的倍数。  
图片放大主要的两点就是：  
\*\*1.\*\*将css的float定位，转换成用js的绝对定位  
\*\*2.\*\*从中心放大缩小物体

实现的步骤  
1.先通过css的float定位，ul宽度设置成li宽的倍数（例子中li的宽是122，没行显示3 个li，所以ul宽设置成366）。使其9张图片在一个div下显示出来。  
2.然后利用循环获取到每个li的left top 值。让每个li都有自己的值。

3.ul 的position：relative相对定位，接着用循环设置li的position：absolute绝对定位  
4.创建img标签。然后设置img的src属性。最后将img添加到li便签里面。  
5.添加鼠标移入移出事件，当鼠标移动到该图片让该图片的宽和高放大原来的两倍。移出的时候恢复原来的大小。放大的时候需要注意marginleft 和margintop值 减去该图片一半 否则图片会发生偏移。没办法实现中心放大。  
6.还要注意图片放大时候的层级问题 设置 zIndex 值 让每次放大的图片的层级最大。移出的时候恢复。  
下面是一些简单的代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		*{
    			margin:0;
    			padding:0;
    		}
    		#ul{
    			width:366px;margin:100px auto; position: relative; border:1px solid black; height: 366px;
    		}
    		#ul li {
    			width: 100px; height: 100px; border:1px solid black; margin:10px; float:left; background:gray; list-style:none;
    		}
    		#ul li img{
    			width: 100%;
    			height: 100%;
    		}
    	</style>
    	<script src = "startMove.js"></script>
    	<script>
    			window.onload = function(){
    				var oUl = document.getElementById('ul');
    				var aLis = oUl.getElementsByTagName('li');
    				var currentIndex = 3;
    			 	//获取每个li的位置
    			 	for(var i = 0; i < aLis.length; i++){
    			 		aLis[i].style.left = aLis[i].offsetLeft + 'px';
    			 		aLis[i].style.top = aLis[i].offsetTop + 'px';
    			 	}
    			 	//相对定位==>绝对定位
    			 	for(var i = 0; i < aLis.length; i++){
    			 		aLis[i].style.position = "absolute";
    			 		aLis[i].style.margin = "0";
     
    			 		var oImg = document.createElement('img');
    			 		oImg.src = "../images/" + (i + 1) + '.jpg';
    			 		aLis[i].appendChild(oImg);
    			 	}
    
    			 	for(var i = 0; i < aLis.length; i++){
    			 		aLis[i].onmouseover = function(){
    			 			this.style.zIndex = currentIndex++;
    			 			startMove(this,{width:200, height: 200, marginLeft: -50, marginTop: -50})
    			 		}
    			 		aLis[i].onmouseout = function(){
    			 			startMove(this,{width: 100, height: 100, marginLeft: 0, marginTop: 0})
    			 		}
    			 	}
    
    			}
    	</script>
    </head>
    <body>
    	<ul id = "ul">
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </body>
    </html>

以上是九宫格布局图片放大的一些基本原理。