<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架</title>
<style type="text/css">
*{margin: 0;padding: 0}
#ul1{ width: 366px;margin: 0 auto;position: relative;}
#ul1 li{list-style: none;;width: 100px;height: 100px;background-color: #ccc; border: 1px solid #333;float: left;margin: 10px;z-index: 0}
</style>
<script src="move.js"></script>
<script>
window.οnlοad=function(){
var oUl=document.getElementById("ul1");
var aLi=document.getElementsByTagName("li");
var zIndex=1;
for(var i=0;i<aLi.length;i++){
aLi[i].style.left=aLi[i].offsetLeft+'px';
aLi[i].style.top=aLi[i].offsetTop+'px';
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position="absolute";
aLi[i].style.margin=0;
}
for(var i=0;i<aLi.length;i++){
aLi[i].οnmοuseοver=function(){
this.style.zIndex=zIndex++;
startMove(this,{width:200,height:200,marginLeft:-50,marginTop:-50});
}
aLi[i].οnmοuseοut=function(){
startMove(this,{width:100,height:100,marginLeft:0,marginTop:0});
}
}
}
</script>
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
js运动框架----3.缩放效果
最新推荐文章于 2024-04-15 22:21:52 发布