标签：style blog http color os io for ar div
网上看到的字符旋转效果，加以改动跟随鼠标旋转并移动，滚轮控制旋转圆到横向直径和纵向直径：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <META content="text/html; charset=gb2312" http-equiv=Content-Type> 5 <META name=GENERATOR content="MSHTML 8.00.7600.17051"> 6 <title>Insert title here</title> 7 </head> 8 <body onload="setting()"> 9 <DIV 10 style="POSITION: absolute;font-weight:bold;" 11 id="Circle0"> 12 <P><FONT COLOR = steelblue size=4>你</FONT></P> 13 </DIV> 14 <DIV 15 style="POSITION: absolute;font-weight:bold;" 16 id="Circle1"> 17 <P><FONT COLOR = steelblue size=4>是</FONT></P> 18 </DIV> 19 <DIV 20 style="POSITION: absolute;font-weight:bold;" 21 id=Circle2> 22 <P><FONT COLOR = steelblue size=4>我</FONT></P> 23 </DIV> 24 <DIV 25 style="POSITION: absolute;font-weight:bold;" 26 id=Circle3> 27 <P><FONT COLOR = steelblue size=4>的</FONT></P> 28 </DIV> 29 <DIV 30 style="POSITION: absolute;font-weight:bold;" 31 id=Circle4> 32 <P><FONT color=#ff0000 size=4>小</FONT></P> 33 </DIV> 34 <DIV 35 style="POSITION: absolute;font-weight:bold;" 36 id=Circle5> 37 <P><FONT color=#ff0000 size=4>呀</FONT></P> 38 </DIV> 39 <DIV 40 style="POSITION: absolute;font-weight:bold;" 41 id=Circle6> 42 <P><FONT color=#ff0000 size=4>小</FONT></P> 43 </DIV> 44 <DIV 45 style="POSITION: absolute;font-weight:bold;" 46 id=Circle7> 47 <P><FONT color=#ff0000 size=4>苹</FONT></P> 48 </DIV> 49 <DIV 50 style="POSITION: absolute;font-weight:bold;" 51 id=Circle8> 52 <P><FONT color=#ff0000 size=4>果</FONT></P> 53 </DIV> 54 <DIV 55 style="POSITION: absolute;font-weight:bold;" 56 id=Circle9> 57 <P><FONT color=#008000 size=4>＊</FONT></P> 58 </DIV> 59 <DIV 60 style="POSITION: absolute;font-weight:bold;" 61 id=Circle10> 62 <P><FONT color=#8080ff size=4>怎</FONT></P> 63 </DIV> 64 <DIV 65 style="POSITION: absolute;font-weight:bold;" 66 id=Circle11> 67 <P><FONT color=#8080ff size=4>么</FONT></P> 68 </DIV> 69 <DIV 70 style="POSITION: absolute;font-weight:bold;" 71 id=Circle12> 72 <P><FONT color=#8080ff size=4>爱</FONT></P> 73 </DIV> 74 <DIV 75 style="POSITION: absolute;font-weight:bold;" 76 id=Circle13> 77 <P><FONT color=#8080ff size=4>你</FONT></P> 78 </DIV> 79 <DIV 80 style="POSITION: absolute;font-weight:bold;" 81 id=Circle14> 82 <P><FONT color=#8080ff size=4>都</FONT></P> 83 </DIV> 84 <DIV 85 style="POSITION: absolute;font-weight:bold;" 86 id=Circle15> 87 <P><FONT color=#8080ff size=4>不</FONT></P> 88 </DIV> 89 <DIV 90 style="POSITION: absolute;font-weight:bold;" 91 id=Circle16> 92 <P><FONT color=#8080ff size=4>嫌</FONT></P> 93 </DIV> 94 <DIV 95 style="POSITION: absolute;font-weight:bold;" 96 id=Circle17> 97 <P><FONT color=#8080ff size=4>多</FONT></P> 98 </DIV> 99 <DIV 100 style="POSITION: absolute;font-weight:bold;" 101 id=Circle18> 102 <P><FONT color=#008000 size=4>＊</FONT></P> 103 </DIV> 104 <DIV 105 style="POSITION: absolute;font-weight:bold;" 106 id=Circle19> 107 <P><FONT color=#ff0000 size=4>就</FONT></P> 108 </DIV> 109 <DIV 110 style="POSITION: absolute;font-weight:bold;" 111 id=Circle20> 112 <P><FONT color=#ff0000 size=4>这</FONT></P> 113 </DIV> 114 <DIV 115 style="POSITION: absolute;font-weight:bold;" 116 id=Circle21> 117 <P><FONT color=#ff0000 size=4>样</FONT></P> 118 </DIV> 119 <DIV 120 style="POSITION: absolute;font-weight:bold;" 121 id=Circle22> 122 <P><FONT color=#ff0000 size=4>走</FONT></P> 123 </DIV> 124 <DIV 125 style="POSITION: absolute;font-weight:bold;" 126 id=Circle23> 127 <P><FONT color=#ff0000 size=4>进</FONT></P> 128 </DIV> 129 <DIV 130 style="POSITION: absolute;font-weight:bold;" 131 id=Circle24> 132 <P><FONT color=#ff0000 size=4>心</FONT></P> 133 </DIV> 134 <DIV 135 style="POSITION: absolute;font-weight:bold;" 136 id=Circle25> 137 <P><FONT color=#ff0000 size=4>窝</FONT></P> 138 </DIV> 139 <DIV 140 style="POSITION: absolute;font-weight:bold;" 141 id=Circle26> 142 <P><FONT color=#008000 size=4>＊</FONT></P> 143 </DIV> 144 145 <script> 146 var CenterX=100, CenterY=100, Pi, Inc; 147 var Circle = new Array(); 148 var Pos = new Array(); 149 var Rx = 2.0,Ry = 1.0; 150 151 function doMouseMove(e) { 152 var evt = e||window.event; 153 var x = evt.clientX || evt.x; 154 var y = evt.clientY || evt.y; 155 CenterX=x; 156 CenterY=y; 157 158 } 159 160 function doMouseWheel(e){ 161 var evt = e||window.event; 162 if(evt.wheelDelta>0){ 163 Rx = Rx - 0.1; 164 Ry = Ry + 0.1; 165 }else{ 166 Rx = Rx + 0.1; 167 Ry = Ry - 0.1; 168 } 169 } 170 171 function setting() { 172 for (i = 0; i <= 26; i++) 173 Circle[i] = eval("document.getElementById(‘Circle" + i + "‘)" + ".style"); 174 175 Radius = 160; 176 Pi = Math.PI; 177 Inc = Pi / 180; 178 179 Pos[0] = 0; 180 for (i = 1; i < Circle.length; i++) 181 Pos[i] = parseFloat(Pos[i - 1] + ((2 * Pi) / Circle.length)); 182 for (i = 0; i < Pos.length; i++) { 183 Pos[i] = Pos[i] + Inc; 184 Circle[i].left = Radius * Math.cos(Pos[i]) + CenterX; 185 Circle[i].top = Radius * Math.sin(Pos[i]) + CenterY; 186 } 187 setInterval("Last()", 10); 188 } 189 190 function Last() { 191 for (i = 0; i < Pos.length; i++) { 192 Circle[i].visibility = "visible"; 193 } 194 195 for (i = 0; i < Pos.length; i++) { 196 Pos[i] = Pos[i] + Inc; 197 Circle[i].left = Rx * Radius * Math.cos(Pos[i]) + CenterX; 198 Circle[i].top = Ry * Radius * Math.sin(Pos[i]) + CenterY; 199 } 200 } 201 202 document.onmousemove = doMouseMove; 203 document.onmousewheel = doMouseWheel; 204 </script> 205 </body> 206 </html>
关于兼容性，在IE和Opera中实现了，但在Chrome中没实现，Firefox和Safari本人没安装，没进行测试。
继续努力中...
标签：style blog http color os io for ar div
原文地址：http://www.cnblogs.com/pinsige/p/3939181.html
