二維陣列的宣告+放射型導航
阿新 • • 發佈：2018-12-11
二維陣列的宣告
<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>