跟随鼠标飘扬的字符（跨浏览器实现）--鼠标事件 

 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 http-equiv="Content-Type" content="text/html; charset=gb2312">
 5 <title>跟随鼠标飘扬的字符</title>
 6 <style type="text/css">
 7 .spanstyle {
 8     COLOR: #0066ff;
 9     FONT-FAMILY: 隶书;
10     FONT-SIZE: 14pt;
11     FONT-WEIGHT: normal;
12     POSITION: absolute;
13 }
14 </style>
15 <script>
16     var Rx, Ry;
17     var step = 12;
18 
19     // Your snappy message. Important: the space at the end of the sentence!!!
20     var message = "★  五  星  红  旗  迎  风  飘  扬  ★";
21     message = message.split("");
22     var xpos = new Array();
23     var ypos = new Array();
24 
25     function handlerMM(e) {
26         var evt = e || window.event;
27         Rx = evt.clientX || evt.x;
28         Ry = evt.clientY || evt.y;
29     }
30 
31     function makesnake() {
32         xpos[0] = Rx + step;
33         ypos[0] = Ry;
34 
35         for (i = message.length - 1; i >= 1; i--) {
36             xpos[i] = xpos[i - 1] + step;
37             ypos[i] = ypos[i - 1];
38         }
39 
40         for (i = 0; i <= message.length - 1; i++) {
41             var thisspan = eval("span" + (i) + ".style");
42             thisspan.posLeft = xpos[i];
43             thisspan.posTop = ypos[i];
44             thisspan.color = Math.random() * 255 * 255 * 255 + Math.random()
45                     * 255 * 255 + Math.random() * 255;
46         }
47 
48         var timer = setTimeout("makesnake()", 2);
49     }
50 </script>
51 </head>
52 <body bgcolor="#ffffff" onload="makesnake()">
53 <script>
54     for (i = 0; i <= message.length - 1; i++) {
55         document.write("<span id='span"+i+"' class='spanstyle'>");
56         document.write(message[i]);
57         document.write("</span>");
58     }
59     document.onmousemove = handlerMM;
60 </script>
61 </body>
62 </html>

 

posted @ 2014-08-27 17:33  核动力脚本  阅读(231)  评论(0)    收藏  举报