javascript:一个2D旋转图的实现
今天从图书馆回寝室的路上，突然灵感迸发，想做一个旋转图(2D)，于是就有了下文。
首先说一下思路吧， 我觉得做程序最重要的就是思路了，思路对了，代码那就是手到拈来。-_-！
1、 CSS布局: 我采用了4长图片，在CSS设置里，他并不是绝对定位。
2、采用布局转换：在javascript中设置img的position：absolute，同时加上他们的left和top;
3、当点击按钮开始时，开始进行旋转。
4、旋转时的逻辑是，由当前图片的索引，运动到下一张图片的索引位置。 特别注意的是: 最后一张应该运到到第一张的位置，也就是aImg[0]的位置.
5、还有一点也很重要。 那就是层级z-index. 这里我采用一个办法。设置了一个变量times,每当点击的时候，times就+1，这样我们就能知道每张图片应该在的位置，相应的索引值也应该改变. 那么怎么获取图片所在的位置呢? 其实aImg[i]所在的位置，就是原来aImg[(i+times)%aImg.length]所在的位置了(关键在于取模)。
第一次也博客，书写和表达可能不太清楚，大家见谅， 以下为js代码部分:
1 window.onload = function(){ 2 var MyApp = { 3 dom: { 4 aImg: document.getElementsByTagName('img'), 5 oBtn: document.getElementById('btn') 6 }, 7 times: 0, 8 Switch: true, 9 First: true 10 }; 11 absoluted(MyApp.dom.aImg); 12 setPosition(MyApp.dom.aImg[0], 200, 200, 2); 13 setPosition(MyApp.dom.aImg[1], 351, 300, 3); 14 setPosition(MyApp.dom.aImg[2], 502, 200, 2); 15 setPosition(MyApp.dom.aImg[3], 351, 122, 1); 16 MyApp.dom.oBtn.onclick = function(){ 17 if(MyApp.Switch||MyApp.First){ 18 MyApp.Switch = false; 19 MyApp.First = false; 20 var a = MyApp.dom; 21 MyApp.times++; 22 for(var i=0;i<a.aImg.length;i++){ 23 a.aImg[i].style.zIndex = a.aImg[(i+MyApp.times)%a.aImg.length].index; 24 } 25 changePosition(a.aImg, function(){ 26 MyApp.Switch = true; 27 }); 28 } 29 } 30 } 31 function setPosition(obj, left, top, index){ 32 obj.style.left = left + 'px'; 33 obj.style.top = top + 'px'; 34 obj.style.zIndex = index; 35 obj.index = index; 36 } 37 function changePosition(wrap, fn){ 38 for(var i=0;i<wrap.length;i++){ 39 if(i==3){ 40 MOVE:Buffer_Move(wrap[3],{left: wrap[0].offsetLeft, top: wrap[0].offsetTop}); 41 }else{ 42 MOVE:Buffer_Move(wrap[i],{left: wrap[i+1].offsetLeft, top: wrap[i+1].offsetTop}, fn); 43 } 44 } 45 } 46 function absoluted(wrap){ 47 for(var i=0;i<wrap.length;i++){ 48 wrap[i].style.left = wrap[i].offsetLeft + 'px'; 49 wrap[i].style.top = wrap[i].offsetTop + 'px'; 50 } 51 for(var i=0;i<wrap.length;i++){ 52 wrap[i].style.position = 'absolute'; 53 } 54 }
另外可能有些同学会问这个MOVE:Buffer_Move是什么东西， 其实，这是我写的一个运动框架，有缓冲和弹性运动。如果有朋友感兴趣的话可以到我的博客里看看!
以下为HTML代码部分:
1 <body> 2 <img src="images/21.jpg" /> 3 <img src="images/22.jpg" /> 4 <img src="images/23.jpg" /> 5 <img src="images/24.jpg" /> 6 <input type="button" id="btn" value="测试"/> 7 </body>
以上就是这个2D旋转图的代码啦。。 过些天我灵感来了，我写一个3D的，这估计会用到css3，谁知道呢，到时候在说吧! -_-！
