标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style> * { margin: 0; padding: 0; } ul { width: 400px; position: relative; margin: 100px auto; } li { width: 100px; height: 100px; background: red; margin: 10px; float: left; list-style: none; z-index: 1 } </style> <script> window.onload = function() { var oUl = document.getElementById("test"); var oLi = oUl.getElementsByTagName(‘li‘); var curZIndex = 2; for (var i = 0; i < oLi.length; i++) { oLi[i].style.left = oLi[i].offsetLeft + "px"; oLi[i].style.top = oLi[i].offsetTop + "px"; } for (var i = 0; i < oLi.length; i++) { oLi[i].style.position = "absolute"; oLi[i].style.margin = 0 oLi[i].onmouseover = function() { this.style.zIndex = curZIndex++; this.style.width = 150 + "px"; this.style.height = 150 + "px"; this.style.marginLeft = -25 + "px"; this.style.marginTop = -25 + "px"; this.style.backgroundColor = "blue"; } oLi[i].onmouseout = function() { this.style.width = 100 + "px"; this.style.height = 100 + "px"; this.style.marginLeft = 0 + "px"; this.style.marginTop = 0 + "px"; this.style.backgroundColor = "red"; } } } </script> </head> <body> <ul id="test"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
标签：
原文地址：http://www.cnblogs.com/liujin0505/p/4470915.html
