实现效果如图,也就是一个图像的旋转。注意,旋转后的文字是相对应的,而且文字还是立起的。第一次点击时显示,第二次点击时开始旋转。下面是我做这个效果的记录,方法这么差,我也就不说什么了。
先上HTML/CSS部分,这部分都是相同的。JS放在 script 标签里。
<!-- Author: XiaoWen Create a file: 2016-12-04 17:03:21 Last modified: 2016-12-05 17:34:58 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>V字方块</title> <style> body{ padding: 100px; } ul,li{ margin: 0; padding: 0; list-style:none; width:500px; height:500px; background: #ccc; } ul{ position: relative; } li{ width: 100px; height: 100px; background: #f00; color: #fff; text-align: center; line-height: 100px; font-size: 16px; font-weight:bold; position:absolute; display:none; } </style> </head> <body> <button>旋转</button> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> //这里的 js 代码分次放在下面的文章里。 </script> </body> </html>
第一次实现的代码,一边写一边都感觉后怕……这是在写JS还是在写CSS?
代码太多了。不但多,而且感觉乱,条理不清晰,不易使用。
开始的思路是直接让所有方块相对于左边定位。
<script> var w=100; var l=0; var t=0; var dir=1; var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var btn=document.getElementsByTagName("button")[0]; for(var i=0;i<a_li.length;i++){ a_li[i].style.display="none"; } btn.onclick=function(){ for(var i=0;i<a_li.length;i++){ a_li[i].style.display="block"; } l=0; t=0; i=0; block(dir) dir++ if(dir==5){ dir=1; } } //dir 方向,1 left/2 top/3 right/4 bottom function block(dir){ for(var i=0; i<a_li.length;i++){ switch(dir){ case 1: /*左*/ if(i<2){ a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; l++; t++; }else if(i==2){ console.log(l,t,i) a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; }else{ l--; t++; a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; } break; case 2: /*上*/ if(i<2){ a_li[i].style.left=((a_li.length-l)-1)*w+"px"; a_li[i].style.top=t*w+"px"; l++; t++; }else if(i==2){ console.log(l,t,i) a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; }else{ l--; t--; a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; } break; case 3: /*右*/ if(i<2){ a_li[i].style.left=((a_li.length-l)-1)*w+"px"; a_li[i].style.top=((a_li.length-t)-1)*w+"px"; l++; t++; }else if(i==2){ console.log(l,t,i) a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; }else{ l++; t--; a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; } break; default: /*下*/ if(i<2){ a_li[i].style.left=l*w+"px"; a_li[i].style.top=((a_li.length-t)-1)*w+"px"; l++; t++; }else if(i==2){ console.log(l,t,i) a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; }else{ l++; t++; a_li[i].style.left=l*w+"px"; a_li[i].style.top=t*w+"px"; } } } } </script>
第二次实现的代码。上面写的
开始寻找新思路,然后一直看图……
发现:元素在每一边上的位置都是相同的。有一个方向的位置只增不减,有一个方向有增有减。如函数:fk(fx1,fx2)。然后,这种方法写出来的效果显然不符合要求,5的位置应该是1,没事,反正这是一个思路而已,办法总是人想的,代码行数正在减少中……
<script> //思路:先不考虑具体元素,只考虑元素的位置。 //元素在每一边上的位置都是相同的。有一个方向的位置只增不减,有一个方向有增有减。如函数:fk(fx1,fx2) var w=100; var btn_num=0; var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var btn=document.getElementsByTagName("button")[0]; btn.onclick=function(){ btn_num++; switch(btn_num){ case 1: for(var i=0;i<a_li.length;i++){ a_li[i].style.display="block"; } fk("left","top"); break; case 2: fk("top","left"); break; case 3: fk("right","top"); break; default: fk("bottom","left"); btn_num=0; } } //fx1 增减方向, fx2仅增方向 function fk(fx1,fx2){ for(var i=0;i<a_li.length;i++){ /*下面这四行用来消除上次的位置*/ a_li[i].style.left="auto"; a_li[i].style.top="auto"; a_li[i].style.right="auto"; a_li[i].style.bottom="auto"; if(i>parseInt(a_li.length/2)){ //取出中间以上的元素 a_li[i].style[fx1]=(a_li.length-i-1)*w+"px"; //a_li.length-i-1相当于a_li.length-(i+1),表示剩下的位置关系。 a_li[i].style[fx2]=i*w+"px"; }else{ a_li[i].style[fx1]=i*w+"px"; a_li[i].style[fx2]=i*w+"px"; } } } </script>
第三次,感觉总算是像点样子了。思路:直接四个边分别考虑,元素只相对某一边定位。
<script> //思路:直接四个边分别考虑,元素只相对某一边定位。 // var w=100; var btn_num=0; var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var btn=document.getElementsByTagName("button")[0]; btn.onclick=function(){ btn_num++; switch(btn_num){ case 1: for(var i=0;i<a_li.length;i++){ a_li[i].style.display="block"; } fk("left","top"); break; case 2: fk("top","right"); break; case 3: fk("right","bottom"); break; default: fk("bottom","left"); btn_num=0; } } //fx1定位的方向, fx2开始增加方向(下一方向) function fk(fx1,fx2){ for(var i=0;i<a_li.length;i++){ /*下面这四行用来消除上次的位置*/ a_li[i].style.left="auto"; a_li[i].style.top="auto"; a_li[i].style.right="auto"; a_li[i].style.bottom="auto"; /****/ a_li[i].style[fx1]=i*w+"px"; a_li[i].style[fx2]=i*w+"px"; if(i>parseInt(a_li.length/2)){ a_li[i].style[fx1]=(a_li.length-(i+1))*w+"px"; a_li[i].style[fx2]=i*w+"px"; } } } </script>
第三次写的代码,感觉函数fk(fx1,fx2)的第二个参数的存在有点鸡肋。按分析fx2是能根据fx1算出来的(也就是如果第一个参数是top,第二个就是right。顺时针方向的下一个),所以其实不用这个参数也可以。
我最后还是要了,因为我的想法是,如果不要的话还得在函数里判断一下fx1的参数,配合已知的fx2继续计算。这就得多写几行判断语句了,大概得增加十行代码以上吧。所以就手工传送参数2(下一个方向)吧。
那么,还有没有更简单的方法呢?