TShopping

 找回密碼
 註冊
搜索
查看: 744|回復: 1

[教學] 溶解文字的特效

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

  1. <HEAD><script language="javascript">
  2. var message = new Array()
  3. message[0]=" 請修改這裡!"
  4. message[1]=" 請修改這裡"
  5. message[2]=" 請修改這裡 "
  6. message[3]=" 請修改這裡 "
  7. message[4]=" 請修改這裡"
  8. var i_message=0
  9. var covertop=100  // 設置文章離視窗頂端的距離(像素)。
  10. var coverleft=50 // 設置文章離視窗左邊的距離(像素)。

  11. // 本範例slidefader.gif圖檔是以白色背景
  12. // 若你要改變背景顏色請自行製作一幅新圖檔 1200*96 slidefader.gif
  13. // 設置slidefader.gif圖檔的尺寸。如果你要改變尺寸,你也應該製作一幅新圖檔(建議你不必更改)。
  14. var coverwidth=1200
  15. var coverheight=96

  16. var texttop=covertop
  17. var textleft=coverleft

  18. // 設置文字效果的寬度,若你要改變寬度必須與上面在<style>標簽內【width:400px;】寬度屬性相同配合
  19. var textwidth=400
  20. var textheight=coverheight

  21. var cliptop=0
  22. var clipright=textwidth
  23. var clipbottom=coverheight
  24. var clipleft=0

  25. var clippoints

  26. // 設置溶解效果的速度
  27. var step=30
  28. var pause=60

  29. var timer

  30. function init() {
  31. if (document.all) {
  32. document.all.text.style.posTop=texttop
  33. document.all.text.style.posLeft=textleft
  34. document.all.cover.style.posTop=covertop
  35. document.all.cover.style.posLeft=coverleft
  36. clipleft=0
  37. fadeout()
  38. }
  39. }
  40. function fadeout() {
  41. if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) { 
  42. clipleft+=step
  43. clipright=clipleft+textwidth
  44. clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  45. document.all.cover.style.clip=clippoints
  46. document.all.cover.style.posLeft-=step
  47. timer= setTimeout("fadeout()",pause)
  48. }
  49. else {
  50. clearTimeout(timer)
  51. i_message++
  52. if (i_message>=message.length) {i_message=0}
  53. text.innerHTML=message[i_message] 
  54. fadein()

  55. }
  56. }
  57. function fadein() {
  58. if (document.all.cover.style.posLeft <=coverleft) { 
  59. clipleft-=step
  60. clipright=clipleft+textwidth
  61. clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
  62. document.all.cover.style.clip=clippoints
  63. document.all.cover.style.posLeft+=step
  64. timer= setTimeout("fadein()",pause)
  65. }
  66. else {
  67. clearTimeout(timer)
  68. init()
  69. }
  70. }
  71. </script>
  72. <style type="text/css">
  73. .textstyle{
  74. position:absolute;
  75. width:400px;
  76. font-family:Arial;
  77. font-size:12pt;
  78. font-weight:bold;
  79. text-align:center;
  80. color:FFFFFF;
  81. filter:glow(color=666666,strength=2);
  82. }
  83. .coverstyle{
  84. position:absolute;
  85. }
  86. </style></HEAD>

  87. <BODY onLoad="if(document.all&&window.print)init()"><script language="javascript1.2">
  88. if (document.all&&window.print){
  89. document.write('<DIV ID="text" class="textstyle">'+message[0]+'</div>') src="slidefader.gif"></DIV>')
  90. }
  91. </script></BODY>
複製代碼

 

臉書網友討論
發表於 2013-11-14 00:16:43 | 顯示全部樓層
說的不錯  

版主招募中

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

本版積分規則



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

GMT+8, 2016-12-6 08:40 , Processed in 0.053989 second(s), 19 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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