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