新手站长论坛

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 7186|回复: 50

庆祝积分上500,附上js特效一份

  [复制链接]
发表于 2010-9-4 22:55 | 显示全部楼层 |阅读模式
以下是html代码,复制并保存成html文件就可以运行,跟随鼠标的旋转时钟,效果很华丽
  1. <html>
  2. <head>
  3. <title>ImeeGo's Blog 欢迎光临! http://imeego5.com</title>
  4. </head><BODY>
  5. <h1 align="center">&nbsp;</h1>
  6. <h1 align="center">&nbsp;</h1>
  7. <h1 align="center">&nbsp;</h1>
  8. <h1 align="center">&nbsp;</h1>
  9. <h1 align="center"><a href="http://imeego5.com">ImeeGo's Blog 欢迎光临!
  10.   </a>
  11.   <!--将以下代码加入HTML的<Body></Body>之间-->
  12.   
  13.   <SCRIPT language=JavaScript>                     
  14. <!--                     
  15. dCol="0000FF"
  16. fCol="FF0000"
  17. sCol="00FF00"
  18. mCol="000000"
  19. hCol="000000"
  20. ClockHeight=40;                     
  21. ClockWidth=40;                     
  22. ClockFromMouseY=0;                     
  23. ClockFromMouseX=100;                     
  24.                      
  25. d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");                     
  26. m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");                     
  27. date=new Date();                     
  28. day=date.getDate();                     
  29. year=date.getYear();                     
  30. if (year < 2000) year=year+1900;                     
  31. TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year;                     
  32. D=TodaysDate.split('');                     
  33. H='...';                     
  34. H=H.split('');                     
  35. M='....';                     
  36. M=M.split('');                     
  37. S='.....';                     
  38. S=S.split('');                     
  39. Face='1 2 3 4 5 6 7 8 9 10 11 12';                     
  40. font='Arial';                     
  41. size=1;                     
  42. speed=0.6;                     
  43. ns=(document.layers);                     
  44. ie=(document.all);                     
  45. Face=Face.split(' ');                     
  46. n=Face.length;                     
  47. a=size*10;                     
  48. ymouse=0;                     
  49. xmouse=0;                     
  50. scrll=0;                     
  51. props="<font face="+font+" size="+size+" color="+fCol+">";                     
  52. props2="<font face="+font+" size="+size+" color="+dCol+">";                     
  53. Split=360/n;                     
  54. Dsplit=360/D.length;                     
  55. HandHeight=ClockHeight/4.5                     
  56. HandWidth=ClockWidth/4.5                     
  57. HandY=-7;                     
  58. HandX=-2.5;                     
  59. scrll=0;                     
  60. step=0.06;                     
  61. currStep=0;                     
  62. y=new Array();x=new Array();Y=new Array();X=new Array();                     
  63. for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}                     
  64. Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();                     
  65. for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}                     
  66. if (ns){                     
  67. for (i=0; i < D.length; i++)                     
  68. document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');                     
  69. for (i=0; i < n; i++)                     
  70. document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');                     
  71. for (i=0; i < S.length; i++)                     
  72. document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');                     
  73. for (i=0; i < M.length; i++)                     
  74. document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');                     
  75. for (i=0; i < H.length; i++)                     
  76. document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');                     
  77. }                     
  78. if (ie){                     
  79. document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');                     
  80. for (i=0; i < D.length; i++)                     
  81. document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');                     
  82. document.write('</div></div>');                     
  83. document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');                     
  84. for (i=0; i < n; i++)                     
  85. document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');                     
  86. document.write('</div></div>');                     
  87. document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');                     
  88. for (i=0; i < H.length; i++)                     
  89. document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');                     
  90. document.write('</div></div>');                     
  91. document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');                     
  92. for (i=0; i < M.length; i++)                     
  93. document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');                     
  94. document.write('</div></div>')                     
  95. document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');                     
  96. for (i=0; i < S.length; i++)                     
  97. document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');                     
  98. document.write('</div></div>')                     
  99. }                     
  100. (ns)?window.captureEvents(Event.MOUSEMOVE):0;                     
  101. function Mouse(evnt){                     
  102. ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;                     
  103. xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;                     
  104. }                     
  105. (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;                     
  106. function ClockAndAssign(){                     
  107. time = new Date ();                     
  108. secs = time.getSeconds();                     
  109. sec = -1.57 + Math.PI * secs/30;                     
  110. mins = time.getMinutes();                     
  111. min = -1.57 + Math.PI * mins/30;                     
  112. hr = time.getHours();                     
  113. hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;                     
  114. if (ie){                     
  115. Od.style.top=window.document.body.scrollTop;                     
  116. Of.style.top=window.document.body.scrollTop;                     
  117. Oh.style.top=window.document.body.scrollTop;                     
  118. Om.style.top=window.document.body.scrollTop;                     
  119. Os.style.top=window.document.body.scrollTop;                     
  120. }                     
  121. for (i=0; i < n; i++){                     
  122. var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;                     
  123. F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;                     
  124. F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);                     
  125. }                     
  126. for (i=0; i < H.length; i++){                     
  127. var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;                     
  128. HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;                     
  129. HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);                     
  130. }                     
  131. for (i=0; i < M.length; i++){                     
  132. var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;                     
  133. ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;                     
  134. ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);                     
  135. }                     
  136. for (i=0; i < S.length; i++){                     
  137. var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;                     
  138. SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;                     
  139. SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);                     
  140. }                     
  141. for (i=0; i < D.length; i++){                     
  142. var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;                     
  143. DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;                     
  144. DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);                     
  145. }                     
  146. currStep-=step;                     
  147. }                     
  148. function Delay(){                     
  149. scrll=(ns)?window.pageYOffset:0;                     
  150. Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);                     
  151. Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);                     
  152. for (i=1; i < D.length; i++){                     
  153. Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);                     
  154. Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);                     
  155. }                     
  156. y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);                     
  157. x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);                     
  158. for (i=1; i < n; i++){                     
  159. y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);                     
  160. x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);                     
  161. }                     
  162. ClockAndAssign();                     
  163. setTimeout('Delay()',40);                     
  164. }                     
  165. if (ns||ie)window.onload=Delay;                     
  166. //-->                     
  167.     </SCRIPT>
  168. </h1>
  169. </body></html>
复制代码
{:5_123:} 签名终于可以用超链接了
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2010-9-5 10:30 | 显示全部楼层
给你补个效果演示:
截图00.jpg

当然那个市中是随着鼠标移动而移动的. 由于截图是静态的看不到效果.

这里给大家一个测试效果的简单方法: (完全新手)
1。新建一个文本文档

1.jpg
2。修改txt后缀为htm
2.jpg
3。用记事本打开 把代码放进去.保存
3.jpg

4。用浏览器打开可疑看到效果了.
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
 楼主| 发表于 2010-9-5 12:22 | 显示全部楼层
{:5_158:}

谢老大
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-3-14 10:52 | 显示全部楼层
学习中! 不错
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-6-11 01:15 | 显示全部楼层
现在生意是越来越不好做了哦。。。。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-6-11 20:35 | 显示全部楼层
很不错的帖子,以后需要多学习学习,支持原创,多多更新!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-6-12 13:30 | 显示全部楼层
谢谢 我是来学习的
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-6-17 16:47 | 显示全部楼层
效果真不错。赞。。。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-7-19 09:40 | 显示全部楼层
需要原创 哈哈
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-9 17:29 | 显示全部楼层
努力~~各位。。。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-13 11:48 | 显示全部楼层
顶一下帖子,长点人气。不错!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-17 20:47 | 显示全部楼层
呵呵楼主你真厉害,佩服哦!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-18 11:17 | 显示全部楼层
{:5_132:}太强悍了  什么时候我也能这样
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-19 14:09 | 显示全部楼层
去干吗啊~~~伤心啊~~~
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-9-7 16:56 | 显示全部楼层
贴子不错!顶一个!!!!!!!!!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-9-8 17:50 | 显示全部楼层
8错呦
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-9-13 15:45 | 显示全部楼层
来看看了拉。。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-9-14 04:33 | 显示全部楼层
大家好我是新来的请大家多关照啊
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-9-15 16:06 | 显示全部楼层
学习 学习下   呵呵
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-9-29 20:04 | 显示全部楼层
初来乍到,请多多关照。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

基础教程 HTML(网页制作基础课) Dreamweaver(网页制作课程) CSS基础知识视频教程 Photoshop(作图基础课) 进阶教程 SEO教程 PHP教程 ASP教程 JavaScript
分步教程: 域名注册教程 空间购买教程 域名解析教程 网站备案教程 域名绑定教程 上传下载教程 思路方法: 菜鸟起步教程 通用建站思路 新手建站过程 本地免费空间
实例教程 Discuz(论坛) Phpwind(论坛) ECshop(网店) Shopex(网店) Dedecms(文章资讯) PHP168(文章资讯) 114la(网址导航) uchome(交友) Wordpress(博客) | 更多
特色板块: 新手站长交流(注册后即可发帖) 数据百度大课堂授课内容 cnzhanzhang学院 站长在线答疑(建站问题免费解答) 建站教程学习区 发外链 发广告 seo交流站长群

QQ|广告报价|Archiver|手机版| 新手站长网 ( 豫ICP备14019290号 )

Powered by Discuz! X3.2

© 2007-2016 新手站长论坛 Inc.

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