您的位置：首页 > Web前端 > JavaScript

js hover放大效果

2016-12-16 00:00 176 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航