<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片放大居中</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0; padding:0;}
ul,li{margin-right: 0; padding:0;}
li{list-style:none;}
a{text-decoration: none;}
.clearfix:before,.clearfix:after{display: table; content: "";}
.clearfix:after{overflow: hidden; clear: both;}
.clearfix{zoom:1;}
body{ 100%; height: 100%; background-color: #000; overflow:hidden;}
#box{330px; margin:100px auto; position: relative;}
#box li{100px; height:100px; background:red; margin:10px 10px 0 0; float:left; color:#fff; line-height:24px;}
</style>
</head>
<body>
<ul id="box" class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/app/move.js"></script>
<script>
window.onload = function(){
var aLi = document.getElementById('box').getElementsByTagName('li');
var arr = [];
var i=0;
var zIndex = 1;
for(i=0; i<aLi.length; i++){
aLi[i].innerHTML = 'left：'+aLi[i].offsetLeft + 'px' + '<br>top：'+ aLi[i].offsetTop + 'px';
arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
}
for(i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].style.left = arr[i].left + 'px';
aLi[i].style.top = arr[i].top + 'px';
aLi[i].style.position ='absolute';
aLi[i].style.margin = 0;
aLi[i].onmouseover = function(){
this.style.background = 'green';
this.style.zIndex=zIndex++;
startMove(this,{
200,
height:200,
left:arr[this.index].left - 50,
top:arr[this.index].top - 50
});
}
aLi[i].onmouseout = function(){
this.style.background = 'red';
startMove(this,{
100,
height:100,
left:arr[this.index].left,
top:arr[this.index].top
});
}
}
}
</script>
</body>
</html>
版权声明：本文博客原创文章。博客，未经同意，不得转载。