图片中心放大原理

最新推荐文章于 2022-12-07 13:55:51 发布

_Wanyong

最新推荐文章于 2022-12-07 13:55:51 发布

阅读量2.7w

点赞数

本文链接：https://blog.csdn.net/weixin_44649507/article/details/87019191

版权

九宫格图片布局也是一些常见的布局，点击图片的时候图片会放大原来的倍数。
图片放大主要的两点就是：
**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>

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

_Wanyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片中心放大原理

九宫格图片布局也是一些常见的布局，点击图片的时候图片会放大原来的倍数。图片放大主要的两点就是：**1.**将css的float定位，转换成用js的绝对定位**2.**从中心放大缩小物体实现的步骤1.先通过css的float定位，ul宽度设置成li宽的倍数（例子中li的宽是122，没行显示3 个li，所以ul宽设置成366）。使其9张图片在一个div下显示出来。2.然后利用循环获取到每个...
复制链接

扫一扫