<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
330px;
margin: 100px auto 0;
position: relative;
}
li{
100px;
height: 100px;
background: red;
float: left;
list-style: none;
margin: 10px 0 0 10px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var arr=[];
var zIndex=1;
for(var i=0;i<aLi.length;i++){
aLi[i].style.left=aLi[i].offsetLeft+"px";
aLi[i].style.top=aLi[i].offsetTop+"px";
arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
// 在用js去设置css样式的时候:在同一个代码块中,有些css样式的设置的权限要高于其他样式
// aLi[i].style.left=aLi[i].offsetLeft+"px";
// aLi[i].style.top=aLi[i].offsetTop+"px";
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="0px";
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>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for(var attr in json) {
var iTarget = json[attr];
if(attr == "opacity") {
iCur = Math.round(css(obj, "opacity") * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur != iTarget) {
iBtn = false;
if(attr == "opacity") {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if(iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
function css(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}