首页 > 代码库 > 跟随鼠标飘扬的字符(跨浏览器实现)--鼠标事件

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

 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: red; 9     FONT-FAMILY: 宋体;10     FONT-SIZE: 10pt;11     POSITION: absolute;12     TOP: -50px;13     VISIBILITY: visible14 }15 </style>16 <script>17     var Rx,Ry;18     var step = 18;19 20     // Your snappy message. Important: the space at the end of the sentence!!!21     var message = "★五星红旗迎风飘扬★";22     message = message.split("");23     var xpos = new Array();24     var ypos = new Array();25 26     function handlerMM(e) {27         var evt = e||window.event;28         Rx = evt.clientX||evt.x;29         Ry = evt.clientY||evt.y;30     }31 32     function makesnake() {33         xpos[0] = Rx + step;34         ypos[0] = Ry;35         36         for (i = message.length - 1; i >= 1; i--) {37             xpos[i] = xpos[i - 1] + step;38             ypos[i] = ypos[i - 1];39         }40 41         for (i = 0; i <= message.length - 1; i++) {42             var thisspan = eval("span" + (i) + ".style");43             thisspan.posLeft = xpos[i];44             thisspan.posTop = ypos[i];45         }46 47         var timer = setTimeout("makesnake()", 30);48     }49 </script>50 </head>51 <body bgcolor="#ffffff" onl oad="makesnake()">52 <script>53     for (i = 0; i <= message.length - 1; i++) {54         document.write("<span id=‘span"+i+"‘ class=‘spanstyle‘>");55         document.write(message[i]);56         document.write("</span>");57     }58     document.onmousemove = handlerMM;59 </script>60 </body>61 </html>

 

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