二维数组的声明+放射型导航

最新推荐文章于 2024-08-15 23:29:15 发布

阿布的小布

最新推荐文章于 2024-08-15 23:29:15 发布

阅读量144

点赞数

文章标签：二维数组的声明放射型导航 JavaScript

本文链接：https://blog.csdn.net/weixin_44038355/article/details/84944221

版权

二维数组的声明

 <script type="text/javascript">
    let arr=[[1,2,3],[4,5,6],[7,8,9]];
    console.log(arr[2][2]);
  </script>

放射型导航

只需要改变img的src即可使用

html:

<body>
	<div id="box1">
	    <a href="#"><img src="img/clos.png" /></a>
	    <a href="#"><img src="img/full.png" /></a>
	    <a href="#"><img src="img/open.png" /></a>
	    <a href="#"><img src="img/prev.png" /></a>
	    <a href="#"><img src="img/refresh.png" /></a>
	    <a href="#"><img src="img/home.png" /></a>
	</div>
</body>

style:

<style type="text/css">
  #box1 > a > img{
        position: fixed;
        right: 50px;
        bottom: 50px;
        border-radius: 50%;
        transition: 1s;
    }
</style>

script:

 <script type="text/javascript">
      window.onload=function(){
          var flag=true;
          var homeImg=document.getElementsByTagName("img")[5];
          var closImg=document.getElementsByTagName("img")[0];
          var fullImg=document.getElementsByTagName("img")[1];
          var openImg=document.getElementsByTagName("img")[2];
          var prevImg=document.getElementsByTagName("img")[3];
          var refreshImg=document.getElementsByTagName("img")[4];
          homeImg.onclick=function(){
              if(flag){
                  flag=false;
                  homeImg.style.transform="rotateZ(180deg)";
                  closImg.style.transform="translateY(-150px) rotateZ(180deg)";
                  fullImg.style.transform="translateX(-55px) translateY(-135px) rotateZ(180deg)";
                  openImg.style.transform="translateX(-105px) translateY(-105px) rotateZ(180deg)";
                  prevImg.style.transform="translateX(-135px) translateY(-55px) rotateZ(180deg)";
                  refreshImg.style.transform="translateX(-150px) rotateZ(180deg)";
              }else{
                  flag=true;
                  homeImg.style.transform="";
                  closImg.style.transform="";
                  fullImg.style.transform="";
                  openImg.style.transform="";
                  prevImg.style.transform="";
                  refreshImg.style.transform="";
              }
          }
      }
  </script>