js运动框架----3.缩放效果

最新推荐文章于 2024-04-15 22:21:52 发布

super晴天

最新推荐文章于 2024-04-15 22:21:52 发布

阅读量462

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jp571534020/article/details/48467449

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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