TShopping

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

[教學] DHTML特效選單

[複製鏈接]
發表於 2008-9-23 20:39:04 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
步驟一、將原始碼複製到<HEAD></HEAD>標籤之間
  1. <!--語法在網頁插入的開始-->
  2. <script language="javascript1.2">
  3. //Contents for menu 1
  4. var menu1=new Array()
  5. menu1[0]='<a href="http://www.hinet.net">中華電信</a><br>'
  6. menu1[1]='<a href="http://www.hinet.net">中華電信</a><br>'
  7. menu1[2]='<a href="http://www.hinet.net">中華電信</a><br>'
  8. //Contents for menu 2
  9. var menu2=new Array()
  10. menu2[0]='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
  11. menu2[1]='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
  12. menu2[2]='<a href="http://www.kimo.com.tw">奇摩站</a><br>'
  13. //Contents for menu 3
  14. var menu3=new Array()
  15. menu3[0]='<a href="http://www.pchome.com.tw">PC Home</a><br>'
  16. menu3[1]='<a href="http://www.pchome.com.tw">PC Home</a><br>'
  17. menu3[2]='<a href="http://www.pchome.com.tw">PC Home</a><br>'

  18. </script>
  19. <style type="text/css">
  20. <!--
  21. .iewrap1{
  22. position:relative;
  23. height:30px;
  24. }
  25. .iewrap2{
  26. position:absolute;
  27. }
  28. #dropmenu0, #dropmenu1, #dropmenu2{
  29. visibility:hide;
  30. z-index:100;
  31. }
  32. -->
  33. </style>
  34. <!--語法在網頁插入的結束-->

  35. 步驟二、將原始碼複製到<BODY></BODY>標籤之間

  36. <!--語法在網頁插入的開始-->
  37. <div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
  38. <script language="javascript1.2">
  39. if (document.all)
  40. dropmenu0.style.padding="4px"
  41. for (i=0;i<menu1.length;i++)
  42. document.write(menu1[i])
  43. </script>
  44. </div>
  45. <script language="javascript1.2">
  46. if (document.layers){
  47. document.dropmenu0.captureEvents(Event.CLICK)
  48. document.dropmenu0.onclick=hidemenu2
  49. }
  50. </script>

  51. <div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
  52. <script language="javascript1.2">
  53. if (document.all)
  54. dropmenu1.style.padding="4px"
  55. for (i=0;i<menu2.length;i++)
  56. document.write(menu2[i])
  57. </script>
  58. </div>
  59. <script language="javascript1.2">
  60. if (document.layers){
  61. document.dropmenu1.captureEvents(Event.CLICK)
  62. document.dropmenu1.onclick=hidemenu2
  63. }
  64. </script>

  65. <div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
  66. <script language="javascript1.2">
  67. if (document.all)
  68. dropmenu2.style.padding="4px"
  69. for (i=0;i<menu3.length;i++)
  70. document.write(menu3[i])
  71. </script>
  72. </div>
  73. <script language="javascript1.2">
  74. if (document.layers){
  75. document.dropmenu2.captureEvents(Event.CLICK)
  76. document.dropmenu2.onclick=hidemenu2
  77. }
  78. </script>
  79. <!--語法在網頁插入的結束-->
複製代碼

步驟二、將原始碼複製到<BODY></BODY>標籤之間
  1. <!--語法在網頁插入的開始-->
  2. <div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
  3. <script language="javascript1.2">
  4. if (document.all)
  5. dropmenu0.style.padding="4px"
  6. for (i=0;i<menu1.length;i++)
  7. document.write(menu1[i])
  8. </script>
  9. </div>
  10. <script language="javascript1.2">
  11. if (document.layers){
  12. document.dropmenu0.captureEvents(Event.CLICK)
  13. document.dropmenu0.onclick=hidemenu2
  14. }
  15. </script>

  16. <div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
  17. <script language="javascript1.2">
  18. if (document.all)
  19. dropmenu1.style.padding="4px"
  20. for (i=0;i<menu2.length;i++)
  21. document.write(menu2[i])
  22. </script>
  23. </div>
  24. <script language="javascript1.2">
  25. if (document.layers){
  26. document.dropmenu1.captureEvents(Event.CLICK)
  27. document.dropmenu1.onclick=hidemenu2
  28. }
  29. </script>

  30. <div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
  31. <script language="javascript1.2">
  32. if (document.all)
  33. dropmenu2.style.padding="4px"
  34. for (i=0;i<menu3.length;i++)
  35. document.write(menu3[i])
  36. </script>
  37. </div>
  38. <script language="javascript1.2">
  39. if (document.layers){
  40. document.dropmenu2.captureEvents(Event.CLICK)
  41. document.dropmenu2.onclick=hidemenu2
  42. }
  43. </script>
  44. <!--語法在網頁插入的結束-->
複製代碼

步驟三、將原始碼複製到網頁中欲呈現特效的位置
  1. <!--語法在網頁插入的開始-->
  2. <script language="javascript1.2">
  3. //reusable/////////////////////////////
  4. var zindex=100
  5. function dropit2(whichone){
  6. if (window.themenu&&themenu.id!=whichone.id)
  7. themenu.style.visibility="hidden"
  8. themenu=whichone
  9. if (document.all){
  10. themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
  11. themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
  12. if (themenu.style.visibility=="hidden"){
  13. themenu.style.visibility="visible"
  14. themenu.style.zIndex=zindex++
  15. }
  16. else{
  17. hidemenu()
  18. }}}
  19. function dropit(e,whichone){
  20. if (window.themenu&&themenu.id!=eval(whichone).id)
  21. themenu.visibility="hide"
  22. themenu=eval(whichone)
  23. if (themenu.visibility=="hide")
  24. themenu.visibility="show"
  25. else
  26. themenu.visibility="hide"
  27. themenu.zIndex++
  28. themenu.left=e.pageX-e.layerX
  29. themenu.top=e.pageY-e.layerY+19
  30. return false
  31. }

  32. function hidemenu(whichone){
  33. if (window.themenu)
  34. themenu.style.visibility="hidden"
  35. }

  36. function hidemenu2(){
  37. themenu.visibility="hide"
  38. }

  39. if (document.all)
  40. document.body.onclick=hidemenu
  41. //reusable/////////////////////////////
  42. </script>

  43. <!----------Menu 1 starts here---------->

  44. <ilayer height=35px>
  45. <layer visibility=show><span class=iewrap1 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">主目錄之一</a></b> |     
  46. </span>   
  47. </layer>
  48. </ilayer>     
  49. <!----------Menu 1 ends here---------->   


  50. <!----------Menu 2 starts here---------->     

  51. <ilayer height=35px>     
  52. <layer visibility=show>     
  53. <span class=iewrap1 onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">主目錄之二</a></b> |  
  54. </span>
  55. </layer>
  56. </ilayer>     
  57. <!----------Menu 2 ends here---------->   


  58. <!----------Menu 3 starts here---------->     

  59. <ilayer height=35px>     
  60. <layer visibility=show>     
  61. <span class=iewrap1 onClick="dropit2(dropmenu2);event.cancelBubble=true;return false"><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu2')">主目錄之三</a></b>   
  62. </span>
  63. </layer>
  64. </ilayer>
  65. <!----------Menu 3 ends here---------->
  66. <!--語法在網頁插入的結束-->
複製代碼

 

臉書網友討論
發表於 2011-7-10 00:54:55 | 顯示全部樓層
說的不錯  

版主招募中

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

本版積分規則



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

GMT+8, 2016-12-10 11:28 , Processed in 0.051254 second(s), 19 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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