js 特效

Posted 2020-10-10 C# java C++ 开源通信

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 特效相关的知识，希望对你有一定的参考价值。

下拉菜单

 1 <script type="text/javascript"> 
 2 function displaySubMenu(li) { 
 3 var subMenu = li.getElementsByTagName("ul")[0]; 
 4 subMenu.style.display = "block"; 
 5 } 
 6 function hideSubMenu(li) { 
 7 var subMenu = li.getElementsByTagName("ul")[0]; 
 8 subMenu.style.display = "none"; 
 9  // e.getElementsByClassName("i").length
10  
11 } 
12 </script> 
13

  1  
  2 <style type="text/css"> 
  3 * { 
  4 padding:0; 
  5 margin:0; 
  6 } 
  7 body { 
  8 font-family:verdana, sans-serif; 
  9 font-size:small; 
 10 } 
 11 #navigation, #navigation li ul { 
 12 list-style-type:none; 
 13 } 
 14 #navigation { 
 15 margin:20px; 
 16 } 
 17 #navigation li { 
 18 float:left; 
 19 text-align:center; 
 20 position:relative; 
 21 } 
 22 #navigation li a:link, #navigation li a:visited { 
 23 display:block; 
 24 text-decoration:none; 
 25 color:#000; 
 26 width:120px; 
 27 height:40px; 
 28 line-height:40px; 
 29 border:1px solid #fff; 
 30 border-width:1px 1px 0 0; 
 31 background:#c5dbf2; 
 32 padding-left:10px; 
 33 } 
 34 #navigation li a:hover { 
 35 color:#fff; 
 36 background:#2687eb; 
 37 } 
 38 #navigation li ul li a:hover { 
 39 color:#fff; 
 40 background:#6b839c; 
 41 } 
 42 #navigation li ul { 
 43 display:none; 
 44 position:absolute; 
 45 top:40px; 
 46 left:0; 
 47 margin-top:1px; 
 48 width:120px; 
 49 } 
 50 #navigation li ul li ul { 
 51 display:none; 
 52 position:absolute; 
 53 top:0px; 
 54 left:130px; 
 55 margin-top:0; 
 56 margin-left:1px; 
 57 width:120px; 
 58 } 
 59 </style> 
 60 <script type="text/javascript"> 
 61 function displaySubMenu(li) { 
 62 var subMenu = li.getElementsByTagName("ul")[0]; 
 63 subMenu.style.display = "block"; 
 64 } 
 65 function hideSubMenu(li) { 
 66 var subMenu = li.getElementsByTagName("ul")[0]; 
 67 subMenu.style.display = "none"; 
 68  // e.getElementsByClassName("i").length
 69  
 70 } 
 71 </script> 
 72   
 73 <ul id="navigation"> 
 74 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 75 <a href="#">栏目1</a> 
 76 <ul> 
 77 <li><a href="#">栏目1->菜单1</a></li> 
 78 <li><a href="#">栏目1->菜单2</a></li> 
 79 <li><a href="#">栏目1->菜单3</a></li> 
 80 <li><a href="#">栏目1->菜单4</a></li> 
 81 </ul> 
 82 </li> 
 83 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 84 <a href="#">栏目2</a> 
 85 <ul> 
 86 <li><a href="#">栏目2->菜单1</a></li> 
 87 <li><a href="#">栏目2->菜单2</a></li> 
 88 <li><a href="#">栏目2->菜单3</a></li> 
 89 <li><a href="#">栏目2->菜单4</a></li> 
 90 <li><a href="#">栏目2->菜单5</a></li> 
 91 </ul> 
 92 </li> 
 93 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 94 <a href="#">栏目3</a> 
 95 <ul> 
 96 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
 97 <a href="#">栏目3->菜单1</a> 
 98 <ul> 
 99 <li><a href="#">菜单1->子菜单1</a></li> 
100 <li><a href="#">菜单1->子菜单2</a></li> 
101 <li><a href="#">菜单1->子菜单3</a></li> 
102 <li><a href="#">菜单1->子菜单4</a></li> 
103 </ul> 
104 </li> 
105 <li><a href="#">栏目3->菜单2</a></li> 
106 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
107 <a href="#">栏目3->菜单3</a> 
108 <ul> 
109 <li><a href="#">菜单3->子菜单1</a></li> 
110 <li><a href="#">菜单3->子菜单2</a></li> 
111 <li><a href="#">菜单3->子菜单3</a></li> 
112 </ul> 
113 </li> 
114 </ul> 
115 </li> 
116 </ul> 
117

View Code

以上是关于js 特效的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段：一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库