<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
margin: 0;
padding: 0;
}
#list{
width: 330px;
margin: 100px auto;
position: relative;
}
li{
list-style: none;
width: 100px;
height: 100px;
background: red;
float: left;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
window.onload = function(){
var oUl = document.getElementById("list");
var aLi = document.getElementsByTagName("li");
var arr = [];
var iZindex = 1;
for (var i=0;i<aLi.length;i++) {
arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop})
}
for (var 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 = "0px";
aLi[i].onmouseover = function(){
startMove(this,{
width:200,
height:200,
left :arr[this.index].left- 50,
top : arr[this.index].top - 50
})
this.style.background = "green";
this.style.zIndex = iZindex++;
}
aLi[i].onmouseout = function(){
startMove(this,{
width:100,
height:100,
left :arr[this.index].left,
top : arr[this.index].top
});
this.style.background = "red";
}
}
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
}
//多值缓冲运动
function startMove(obj,json,callBack){
clearInterval(obj.timer)
var iGet = 0;
var iSpeed = 0;
obj.timer = setInterval(function(){
var iBtn = true;
for(var attr in json){
var iTarget = json[attr];
if (attr == "opacity") {
iGet = Math.round(getStyle(obj,attr)*100);
}else{
iGet = parseInt(getStyle(obj,attr));
}
iSpeed = (iTarget - iGet)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iGet != iTarget) {
iBtn = false;
if (attr == "opacity") {
obj.style.opacity = (iGet + iSpeed)/100;
obj.style.filter = "alpah(opacity = "+(iGet + iSpeed)+")";
} else{
obj.style[attr] = iGet + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.timer);
callBack && callBack();
}
},30)
}
}
</script>
</body>
</html>
posted on
