TShopping

 找回密碼
 註冊
搜索
查看: 1541|回復: 5

[教學] 漸現式浮動目錄

[複製鏈接]
發表於 2008-9-23 20:44:30 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
步驟一、將原始碼複製到<HEAD></HEAD>標籤之間
  1. <!--語法在網頁插入的開始-->
  2. <style type="text/css">
  3. <!--
  4. #iewrap{
  5. position:relative;
  6. height:30px
  7. }
  8. #iewrap2{
  9. position:absolute
  10. }
  11. #dropmenu03{
  12. filter:revealTrans(Duration=1.5,Transition=12)
  13. visibility:hide
  14. }
  15. -->
  16. </style>
  17. <!--語法在網頁插入的結束-->
複製代碼

步驟二、將原始碼複製到網頁中欲呈現特效的位置
  1. <!--語法在網頁插入的開始-->
  2. <ilayer id="dropmenu01" height=35px>
  3. <layer id="dropmenu02" visibility=show>
  4. <span id="iewrap">
  5. <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
  6. <a href="#">目錄選單</a>
  7. </span>
  8. </span>
  9. </layer>
  10. </ilayer>

  11. <SCRIPT language=javascript>
  12. <!--
  13. var enableeffect=true

  14. //將下方改成自己所需目錄。
  15. var selection=new Array()
  16. selection[0]='<a href="連結.htm">返回首頁</a><br>'
  17. selection[1]='<a href="連結.htm">目錄特效</a><br>'
  18. selection[2]='<a href="連結.htm">滑鼠特效</a><br>'
  19. selection[3]='<a href="連結.htm">連結特效</a><br>'
  20. selection[4]='<a href="連結.htm">文字特效</a><br>'
  21. selection[5]='<a href="連結.htm">圖片特效</a><br>'
  22. selection[6]='<a href="連結.htm">網頁幫手</a><br>'
  23. selection[7]='<a href="連結.htm">純字跡版</a>'

  24. if (document.layers)
  25. document.dropmenu01.document.dropmenu02.visibility='show'

  26. function dropit2(){
  27. if (document.all){
  28. dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
  29. dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
  30. if (dropmenu03.style.visibility=="hidden"){
  31. if (enableeffect)
  32. dropmenu03.filters.revealTrans.apply()
  33. dropmenu03.style.visibility="visible"
  34. if (enableeffect)
  35. dropmenu03.filters.revealTrans.play()
  36. }
  37. else{
  38. hidemenu()
  39. }}}

  40. function dropit(e){
  41. if (document.dropmenu03.visibility=="hide")
  42. document.dropmenu03.visibility="show"
  43. else
  44. document.dropmenu03.visibility="hide"
  45. document.dropmenu03.left=e.pageX-e.layerX
  46. document.dropmenu03.top=e.pageY-e.layerY+19
  47. return false
  48. }
  49. function hidemenu(){
  50. if (enableeffect)
  51. dropmenu03.filters.revealTrans.stop()
  52. dropmenu03.style.visibility="hidden"
  53. }
  54. function hidemenu2(){
  55. document.dropmenu03.visibility="hide"
  56. }
  57. if (document.layers){
  58. document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
  59. document.dropmenu01.document.dropmenu02.onclick=dropit
  60. }
  61. else if (document.all)
  62. document.body.onclick=hidemenu
  63. //-->
  64. </SCRIPT>
  65. <!-- 你可以改變菜單出現的絕對位置和外觀風格-->
  66. <div id="dropmenu03" style="position:absolute;left:10;top:0;layer-background-color:seashell;background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px">
  67. <script language="javascript1.2">
  68. if (document.all)
  69. dropmenu03.style.padding='6px'
  70. for (i=0;i<selection.length;i++)
  71. document.write(selection[i])
  72. </script>
  73. </div>

  74. <script language="javascript1.2">
  75. if (document.layers){
  76. document.dropmenu03.captureEvents(Event.CLICK)
  77. document.dropmenu03.onclick=hidemenu2
  78. }
  79. </script>
  80. <!--語法在網頁插入的結束-->
複製代碼

 

臉書網友討論
發表於 2011-6-23 00:42:41 | 顯示全部樓層
支持你加分  

版主招募中

發表於 2011-6-23 01:00:12 | 顯示全部樓層
鑒定完畢.!  


發表於 2012-8-26 00:57:08 | 顯示全部樓層
挺好啊  


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

本版積分規則



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

GMT+8, 2016-12-3 16:29 , Processed in 0.059496 second(s), 18 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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