<!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>