设为首页收藏本站

 找回密码
 注册
鼠窝站长论坛»论坛 › 综合讨论区 › 建站综合交流区 › 酷酷的三色鼠标
返回列表 发新帖
查看: 1418|回复: 0

酷酷的三色鼠标

[复制链接]
发表于 2011-1-22 19:25:03 | 显示全部楼层 |阅读模式
在网页上实现三色围鼠标的特效，貌似只支持IE浏览器！
  1. <script language="JavaScript">
  2. var a_Colour='ff0000';
  3. var b_Colour='00ff00';
  4. var c_Colour='0000ff';
  5. var Size=50;
  6. var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.03;
  7. if (document.layers){
  8. window.captureEvents(Event.MOUSEMOVE);
  9. function nsMouse(evnt){
  10. xpos = window.pageYOffset+evnt.pageX+6;
  11. ypos = window.pageYOffset+evnt.pageY+16;
  12. }
  13. window.onMouseMove = nsMouse;
  14. }
  15. else if (document.all)
  16. {
  17. function ieMouse(){
  18. xpos = document.body.scrollLeft+event.x+6;
  19. ypos = document.body.scrollTop+event.y+16;
  20. }
  21. document.onmousemove = ieMouse;
  22. }
  23. function swirl(){
  24. for (i = 0; i < 3; i++)
  25. {
  26. YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep)*6);
  27. XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep)*6);
  28. }
  29. ThisStep+=step;
  30. setTimeout('swirl()',10);
  31. }
  32. var amount=10;
  33. if (document.layers){
  34. for (i = 0; i < amount; i++)
  35. {
  36. document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
  37. document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
  38. document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
  39. }
  40. }
  41. else if (document.all){
  42. document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
  43. +'<div id="IDiv" style="position:relative">');
  44. for (i = 0; i < amount; i++)
  45. {
  46. document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
  47. document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
  48. document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
  49. }
  50. document.write('</div></div>');
  51. }
  52. function prepos(){
  53. var ntscp=document.layers;
  54. var msie=document.all;
  55. if (document.layers){
  56. for (i = 0; i < amount; i++)
  57. {
  58. if (i < amount-1)
  59. {
  60. ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
  61. ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
  62. ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
  63. }
  64. else
  65. {
  66. ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
  67. ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
  68. ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
  69. }
  70. }
  71. }
  72. else if (document.all){
  73. for (i = 0; i <  amount; i++)
  74. {
  75. if (i < amount-1)
  76. {
  77. msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
  78. msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
  79. msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
  80. }
  81. else
  82. {
  83. msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
  84. msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
  85. msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
  86. }
  87. }
  88. }
  89. setTimeout("prepos()",10);
  90. }
  91. function Start(){
  92. swirl(),prepos()
  93. }
  94. window.onload=Start;
  95. </script>
  96. </head>
  97. <body>
  98. </body>
  99. </html>
  100. <!--要完成此效果把如下代码加入到<head>区域中-->
  101. <script language="JavaScript">
  102. var a_Colour='ff0000';
  103. var b_Colour='00ff00';
  104. var c_Colour='0000ff';
  105. var Size=50;
  106. var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.03;
  107. if (document.layers){
  108. window.captureEvents(Event.MOUSEMOVE);
  109. function nsMouse(evnt){
  110. xpos = window.pageYOffset+evnt.pageX+6;
  111. ypos = window.pageYOffset+evnt.pageY+16;
  112. }
  113. window.onMouseMove = nsMouse;
  114. }
  115. else if (document.all)
  116. {
  117. function ieMouse(){
  118. xpos = document.body.scrollLeft+event.x+6;
  119. ypos = document.body.scrollTop+event.y+16;
  120. }
  121. document.onmousemove = ieMouse;
  122. }
  123. function swirl(){
  124. for (i = 0; i < 3; i++)
  125. {
  126. YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep)*6);
  127. XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep)*6);
  128. }
  129. ThisStep+=step;
  130. setTimeout('swirl()',10);
  131. }
  132. var amount=10;
  133. if (document.layers){
  134. for (i = 0; i < amount; i++)
  135. {
  136. document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
  137. document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
  138. document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
  139. }
  140. }
  141. else if (document.all){
  142. document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
  143. +'<div id="IDiv" style="position:relative">');
  144. for (i = 0; i < amount; i++)
  145. {
  146. document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
  147. document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
  148. document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
  149. }
  150. document.write('</div></div>');
  151. }
  152. function prepos(){
  153. var ntscp=document.layers;
  154. var msie=document.all;
  155. if (document.layers){
  156. for (i = 0; i < amount; i++)
  157. {
  158. if (i < amount-1)
  159. {
  160. ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
  161. ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
  162. ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
  163. }
  164. else
  165. {
  166. ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
  167. ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
  168. ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
  169. }
  170. }
  171. }
  172. else if (document.all){
  173. for (i = 0; i <  amount; i++)
  174. {
  175. if (i < amount-1)
  176. {
  177. msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
  178. msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
  179. msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
  180. }
  181. else
  182. {
  183. msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
  184. msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
  185. msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
  186. }
  187. }
  188. }
  189. setTimeout("prepos()",10);
  190. }
  191. function Start(){
  192. swirl(),prepos()
  193. }
  194. window.onload=Start;
  195. </script>
复制代码
代码完，大家自己优化一下吧！
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|鼠窝站长论坛

GMT+8, 2025-1-8 05:46 , Processed in 0.050598 second(s), 17 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表