手机热门标签动画
需求描述：用CSS3实现热门标签的动画效果，要求手指离开屏幕时换屏，换屏时通过动画过渡，点击热门标签时应跳转到搜索页。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>手机热门标签动画</title> 6 <style> 7 body{width:400px;height:400px;} 8 .box{ width:100%; height:290px;border: solid 1px black;position: relative;} 9 .box a{position: absolute;visibility:hidden;text-decoration: none;} 10 .transition{transition: all 0.6s linear;-webkit-transition: all 0.6s linear;-moz-transition: all 0.6s linear;-o-transition: all 0.6s linear;} 11 .label0{top:0;left:0;} 12 .label1{top:20px;left:0;} 13 .label2{top:0;left:50px;} 14 .label3{top:20px;left:50px;} 15 .label4{bottom:0;left:0;} 16 .label5{bottom:20px;left:0;} 17 .label6{bottom:20px;left:0px;} 18 .label7{top:0;right:0;} 19 .label8{top:20px;right:0;} 20 .label9{top:0px;left:0;} 21 .label10{bottom:0;right:0;} 22 .label11{bottom:0;right:50px;} 23 .label12{bottom:20px;right:0;} 24 25 .labelCenter0{top:125px;left:45%;} 26 .labelCenter1{top:125px;left:45%;} 27 .labelCenter2{top:105px;left:45%;} 28 .labelCenter3{top:105px;left:45%;} 29 .labelCenter4{bottom:115px;left:45%;} 30 .labelCenter5{bottom:115px;left:45%;} 31 .labelCenter6{bottom:165px;left:40%;} 32 .labelCenter7{top:125px;right:60%;} 33 .labelCenter8{top:125px;right:50%;} 34 .labelCenter9{top:125px;left:50%;} 35 .labelCenter10{bottom:185px;right:60%;} 36 .labelCenter11{bottom:185px;right:50%;} 37 .labelCenter12{bottom:115px;right:60%;} 38 39 .labelAnimate0{ font-size:22px; top:15px; left:40%;} 40 .labelAnimate1{ font-size:22px; top:45px; left:10%;} 41 .labelAnimate2{ font-size:20px; top:90px; left:15%;} 42 .labelAnimate3{ font-size:22px; top:130px; left:3%;} 43 .labelAnimate4{ font-size:20px; bottom:90px; left:15%; } 44 .labelAnimate5{ font-size:22px; bottom:45px; left:10%;} 45 .labelAnimate6{ font-size:22px; bottom:15px; left:40%;} 46 .labelAnimate7{ font-size:22px; top:45px; right:10%;} 47 .labelAnimate8{ font-size:20px; top:90px; right:15%;} 48 .labelAnimate9{ font-size:18px; top:130px; left:40%;} 49 .labelAnimate10{ font-size:22px; bottom:140px; right:3%;} 50 .labelAnimate11{ font-size:20px; bottom:90px; right:15%;} 51 .labelAnimate12{ font-size:22px; bottom:45px; right:10%;} 52 </style> 53 </head> 54 <body> 55 <div id="box" class="box"> 56 </div> 57 <input type="button" value="换版面" onclick="animate()" /> 58 <script> 59 var box = document.getElementById("box"); 60 var perLabelCount = 13; 61 var cur = 0; 62 var initPos = Math.ceil(Math.random() * 2); 63 var labels = new Array("第一版", "桌面壁纸", "游戏", "性感美女", "google", "捕鱼达人", "会说话的汤姆猫", "安卓优化大师", "91", "QQ", "手机电视", "僵尸", "微信", "第二版", "水果忍者", "音乐", "播放器", "腾讯", "动态壁纸", "手机QQ", "植物大战僵尸", "91手机助手", "360", "连连看", "QQ游戏大厅", "斗地主", "第三版", "3D俄罗斯方块", "桌面", "淘宝", "蘑菇街", "打地鼠", "记事本"); 64 var totalCur = Math.ceil(labels.length / perLabelCount); 65 var isSwipe=false; 66 function animate() { 67 cur < totalCur ? cur++ : cur = 1; 68 var eles = ""; 69 if (cur < totalCur) { 70 for (var i = (cur - 1) * perLabelCount; i < perLabelCount * cur; i += 1) { 71 if (initPos == 1) { 72 eles += '<a href="http://m.apk.hiapk.com/" class="label' + (i - (cur - 1) * perLabelCount) + '" style="color:' + '#' + Math.floor(Math.random() * 16777215).toString(16) + '">' + labels[i] + '</a>'; 73 } else { 74 eles += '<a href="http://m.apk.hiapk.com/" class="labelCenter' + (i - (cur - 1) * perLabelCount) + '" style="color:' + '#' + Math.floor(Math.random() * 16777215).toString(16) + '">' + labels[i] + '</a>'; 75 } 76 } 77 } else { 78 for (var i = (cur - 1) * perLabelCount; i < labels.length; i += 1) { 79 if (initPos == 1) { 80 eles += '<a href="http://m.apk.hiapk.com/" class="label' + (i - (cur - 1) * perLabelCount) + '" style="color:' + '#' + Math.floor(Math.random() * 16777215).toString(16) + '">' + labels[i] + '</a>'; 81 } else { 82 eles += '<a href="http://m.apk.hiapk.com/" class="labelCenter" style="color:' + '#' + Math.floor(Math.random() * 16777215).toString(16) + '">' + labels[i] + '</a>'; 83 } 84 } 85 } 86 box.innerHTML = eles; 87 var aEles = document.querySelectorAll(".box a"); 88 var labelEles = new Array(); 89 for (var i = 0; i < aEles.length; i++) { 90 labelEles[i] = document.querySelector('.box a:nth-child(' + (i + 1) + ')'); 91 labelEles[i].style.visibility = "visible"; 92 labelEles[i].className = 'transition labelAnimate' + i ; 93 } 94 } 95 animate(); 96 box.addEventListener('touchstart', function (event) { 97 isSwipe = false; 98 // startX = event.touches[0].pageX; 99 // startY = event.touches[0].pageY; 100 }, false); 101 box.addEventListener('touchmove', function (event) { 102 event.preventDefault(); 103 isSwipe = true; 104 // endX = event.touches[0].pageX; 105 // endY = event.touches[0].pageY; 106 // alert("触发touchmove"); 107 }, false); 108 box.addEventListener("touchend", function (e) { 109 // alert(endX - startX); 110 // alert(endY - startY); 111 // if ((endX - startX > 20 || endY - startY > 20 || startX - endX > 20 || startY - endY > 20)&&isSwipe==true) { 112 if (isSwipe == true || e.target.nodeName.toLowerCase()!="a") { 113 animate(list); 114 } 115 }, true); 116 </script> 117 </body> 118 </html>
