js运动 九宫格展开
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>未命题</title>
<style>
#ul1{
margin: 100px auto 0;
width:330px;
}
#ul1 li {
height:100px;
width:100px;
position:relative;
background: red;
list-style-type:none;
margin-right: 10px;
margin-bottom: 10px;
float:left;
}
</style>
<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++ )
{
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 ()
{
this.style.background = 'green';
this.style.zIndex = zindex++;
startMove (this,
{
width:200,
height:200,
left:arr[this.index].left - 50,
top:arr[this.index].top - 50
});
}
ali[i].onmouseout = function ()
{
startMove (this,
{
width:100,
height:100,
left:arr[this.index].left,
top:arr[this.index].top
});
}
}
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];
}
}
</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>
