网上看到的字符旋转效果，加以改动跟随鼠标旋转并移动，滚轮控制旋转圆到横向直径和纵向直径：
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本人没安装，没进行测试。
继续努力中...
时间： 2024-11-14 11:15:23