文字围绕鼠标旋转并移动（滚轮控制半径）

浏览数：17 / 时间：2015年06月11日

网上看到的字符旋转效果，加以改动跟随鼠标旋转并移动，滚轮控制旋转圆到横向直径和纵向直径：

  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>