TShopping

 找回密碼
 註冊
搜索
查看: 824|回復: 3

[教學] 由下而上捲動的佈告欄

[複製鏈接]
發表於 2009-5-23 16:13:12 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 

  1. <!--webbot bot="HTMLMarkup" startspan -->
  2. <style type="text/css">
  3. <!--
  4. .textanimlink,a {
  5. text-decoration : none;
  6. }
  7. P.main {
  8. font-family : Arial;
  9. font-size   : 12pt;
  10. font-weight : bold;
  11. }
  12. -->
  13. </style>

  14. <Script Language="javascript">
  15. <!-- Hiding

  16. /*
  17. Script created by Lefteris Haritou
  18. (lef@the.forthnet.gr)
  19. Permission granted to Dynamicdrive.com to feature the script
  20. For more DHTML scripts, visit Dynamicdrive.com
  21. */

  22. bname=navigator.appName;
  23. bversion=parseInt(navigator.appVersion)
  24. if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4))
  25. window.onload=start
  26. else
  27. stop();
  28. window.onunload=stop
  29. if (bname=="Netscape"){
  30. brows=true
  31. dt=2
  32. }
  33. else{
  34. brows=false
  35. dt=20
  36. }
  37. var z=0;
  38. var msg=0;
  39. var rgb=0;
  40. var link=false;
  41. var status=true;
  42. var updwn=false;
  43. var message= new Array();
  44. var value=0;
  45. var h=window.innerHeight;
  46. var w=window.innerWidth;
  47. var timer1;
  48. var timer2;
  49. var timer3;
  50. var convert = new Array()
  51. var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");

  52. // Put here your own messages. Add as many as you wan't (Do not edit anything else in the Script except the lines below)

  53. var bgcolor="#120087"; //Color of background
  54. var color="#55CCFF";  //Color of the Letters

  55. message[0] ='這是一個佈告欄'
  56. message[1] ='文字顏色'
  57. message[2] ='可由淺變深'
  58. message[3] ='<a href="url()">亦可加入超連結</a>'

  59. // Put here your own messages. Add as many as you wan't (Do not edit anything else in the Script except the lines above)

  60. for (x=0; x<16; x++){
  61. for (y=0; y<16; y++){
  62. convert[value]= hexbase[x] + hexbase[y];
  63. value++;
  64. }
  65. }

  66. redx=color.substring(1,3);
  67. greenx=color.substring(3,5);
  68. bluex=color.substring(5,7);
  69. hred=eval(parseInt(redx,16));
  70. hgreen=eval(parseInt(greenx,16));
  71. hblue=eval(parseInt(bluex,16));
  72. eredx=bgcolor.substring(1,3);
  73. egreenx=bgcolor.substring(3,5);
  74. ebluex=bgcolor.substring(5,7);
  75. ered=eval(parseInt(eredx,16));
  76. egreen=eval(parseInt(egreenx,16));
  77. eblue=eval(parseInt(ebluex,16));
  78. red=ered;
  79. green=egreen;
  80. blue=eblue;

  81. function start(){
  82. if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
  83. link=false;
  84. updwn=true;
  85. if (brows)
  86. res=document.layers['textanim'].top
  87. else{
  88. textanim.style.width=document.body.offsetWidth-20;
  89. textanim.innerHTML='<Pre><P Class="main" Align="Center">'+message[msg]+'</P></Pre>'
  90. res=textanim.style.top
  91. for (x=0; x<document.all.length; x++)
  92. if(document.all[x].id=="textanimlink")
  93. link=true;
  94. }
  95. up()
  96. }
  97. }

  98. function stop(){
  99. clearTimeout(timer1);
  100. clearTimeout(timer2);
  101. clearTimeout(timer3);
  102. }

  103. function resz(){
  104. h=window.innerHeight;
  105. w=window.innerWidth;
  106. if (updwn)
  107. timer1=setTimeout('up()',1000)
  108. else
  109. timer2=setTimeout('down()',1000)
  110. }

  111. function breakf(){
  112. if (status){
  113. clearTimeout(timer1);
  114. clearTimeout(timer2);
  115. status=false
  116. return;
  117. }
  118. else{
  119. status=true;
  120. if (updwn)
  121. timer1=setTimeout('up()',dt)
  122. else
  123. timer2=setTimeout('down()',dt)
  124. }
  125. }


  126. function up(){
  127. if (red<hred){
  128. if ((red+7)<hred)
  129. red+=7;
  130. else
  131. red=hred
  132. redx = convert[red]
  133. }
  134. else{
  135. if ((red-7)>hred)
  136. red-=7;
  137. else
  138. red=hred
  139. redx = convert[red]
  140. }

  141. if (green<hgreen){
  142. if ((green+7)<hgreen)
  143. green+=7;
  144. else
  145. green=hgreen
  146. greenx = convert[green]
  147. }
  148. else{
  149. if ((green-7)>hgreen)
  150. green-=7;
  151. else
  152. green=hgreen
  153. greenx = convert[green]
  154. }

  155. if (blue<hblue){
  156. if ((blue+7)<hblue)
  157. blue+=7;
  158. else
  159. blue=hblue
  160. bluex = convert[blue]
  161. }
  162. else{
  163. if ((blue-7)>hblue)
  164. blue-=7;
  165. else
  166. blue=hblue
  167. bluex = convert[blue]
  168. }

  169. rgb = "#"+redx+greenx+bluex;
  170. if (brows){
  171. document.layers['textanim'].document.linkColor=rgb;
  172. document.layers['textanim'].document.vlinkColor=rgb;
  173. if (window.innerHeight!=h || window.innerWidth!=w){
  174. clearTimeout(timer1);
  175. resz()
  176. return;
  177. }
  178. else{
  179. document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
  180. document.layers['textanim'].document.close();
  181. }
  182. }
  183. else{
  184. textanim.style.color=rgb;
  185. if(link)
  186. textanimlink.style.color=rgb;
  187. }
  188. if (z<38){
  189. if (brows)
  190. document.layers['textanim'].top--
  191. else
  192. textanim.style.posTop--
  193. z++
  194. timer1=setTimeout('up()',dt)
  195. }
  196. else
  197. {
  198. updwn=false;
  199. down()
  200. }
  201. }


  202. function down(){
  203. if (red<ered){
  204. if ((red+7)<ered)
  205. red+=7;
  206. else
  207. red=ered
  208. redx = convert[red]
  209. }
  210. else{
  211. if ((red-7)>ered)
  212. red-=7;
  213. else
  214. red=ered
  215. redx = convert[red]
  216. }

  217. if (green<egreen){
  218. if ((green+7)<egreen)
  219. green+=7;
  220. else
  221. green=egreen
  222. greenx = convert[green]
  223. }
  224. else{
  225. if ((green-7)>egreen)
  226. green-=7;
  227. else
  228. green=egreen
  229. greenx = convert[green]
  230. }

  231. if (blue<eblue){
  232. if ((blue+7)<eblue)
  233. blue+=7;
  234. else
  235. blue=eblue
  236. bluex = convert[blue]
  237. }
  238. else{
  239. if ((blue-7)>eblue)
  240. blue-=7;
  241. else
  242. blue=eblue
  243. bluex = convert[blue]
  244. }

  245. rgb = "#"+redx+greenx+bluex;
  246. if (brows){
  247. document.layers['textanim'].document.linkColor=rgb;
  248. document.layers['textanim'].document.vlinkColor=rgb;
  249. if (window.innerHeight!=h || window.innerWidth!=w){
  250. clearTimeout(timer2);
  251. resz()
  252. return;
  253. }
  254. else{
  255. document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
  256. document.layers['textanim'].document.close();
  257. }
  258. }
  259. else{
  260. textanim.style.color=rgb;
  261. if(link)
  262. textanimlink.style.color=rgb;
  263. }

  264. if (z<76){
  265. if (brows)
  266. document.layers['textanim'].top--
  267. else
  268. textanim.style.posTop--
  269. z++
  270. timer2=setTimeout('down()',dt)
  271. }
  272. else
  273. {
  274. if (brows){
  275. document.layers['textanim'].document.write('')
  276. document.layers['textanim'].document.close();
  277. }
  278. else
  279. textanim.innerHTML='';
  280. window.clearInterval(timer2);
  281. if(msg<message.length-1){
  282. msg++;
  283. z=0;
  284. if (brows){
  285. document.layers['textanim'].top=res;
  286. }
  287. else
  288. textanim.style.top=res;
  289. timer3=setTimeout('start()',100);
  290. }
  291. else
  292. {
  293. msg=0;
  294. z=0;
  295. if (brows)
  296. document.layers['textanim'].top=res;
  297. else
  298. textanim.style.top=res;
  299. timer3=setTimeout('start()',2000);
  300. }
  301. }
  302. }

  303. // done hiding -->
  304. </Script>

  305. <Div id="textanim" style="position: absolute; left: 0; top: 250" onclick="breakf()">
  306. </Div>
  307. <Layer name="textanim" left=0 top=250>
  308. </Layer>
  309. <!--webbot bot="HTMLMarkup" endspan -->
複製代碼

 

臉書網友討論
發表於 2012-4-4 00:42:26 | 顯示全部樓層
ding   支持  

版主招募中

發表於 2012-4-4 00:48:34 | 顯示全部樓層
支持~~  


發表於 2012-4-4 00:49:14 | 顯示全部樓層
不錯!不錯!


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-11 22:17 , Processed in 0.058627 second(s), 19 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表