首页>>TAB标签>>JavaScript鼠标滑过改变标签显示内容网页特效(2018-08-26)

JavaScript鼠标滑过改变标签显示内容网页特效

JavaScript鼠标滑过改变标签显示内容网页特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="background:#FFF; padding:50px;">  
  2. <!--效果开始-->  
  3. <div class="changeList">  
  4.   <div class="changeList-top"></div>  
  5.   <dl>  
  6.     <dt id="b1" style="display: block;" onmouseover="changebox(1);">  
  7.       <p>网站公告网页特效...</p>  
  8.       <em><img src="images/shu1.gif" width="29" height="37"></em></dt>  
  9.     <dd id="a1" style="display: none;">  
  10.       <h1><img src="images/shu1_1.gif" width="29" height="49"></h1>  
  11.       <div class="changeListText"><a href="" target="_blank">为广大IT朋友提供实用的js网页特效代码！</a></div>  
  12.     </dd>  
  13.   </dl>  
  14.   <dl>  
  15.     <dt id="b2" onmouseover="changebox(2);" style="display: block;">  
  16.       <p>网页特效集锦-科e互联网页特效...</p>  
  17.       <em><img src="images/shu2.gif" width="29" height="37"></em></dt>  
  18.     <dd id="a2" style="display: none;">  
  19.       <h1><img src="images/shu1_2.gif" width="29" height="49"></h1>  
  20.       <div class="changeListText"><a href="5.html" target="_blank">Js/jQuery上下箭头渐变图文切换（多张）相册特效</a></div>  
  21.     </dd>  
  22.   </dl>  
  23.   <dl>  
  24.     <dt id="b3" onmouseover="changebox(3);" style="display: block;">  
  25.       <p>新闻列表滑过网页特效...</p>  
  26.       <em><img src="images/shu3.gif" width="29" height="37"></em></dt>  
  27.     <dd id="a3" style="display: none;">  
  28.       <h1><img src="images/shu1_3.gif" width="29" height="49"></h1>  
  29.       <div class="changeListText"><a href="4.html" target="_blank">纯Js/jQuery多图片左右渐变轮播展示相册</a></div>  
  30.     </dd>  
  31.   </dl>  
  32.   <dl>  
  33.     <dt id="b4" onmouseover="changebox(4);" style="display: block;">  
  34.       <p>鼠标滑过改变标签内容...</p>  
  35.       <em><img src="images/shu4.gif" width="29" height="37"></em></dt>  
  36.     <dd id="a4" style="display: none;">  
  37.       <h1><img src="images/shu1_4.gif" width="29" height="49"></h1>  
  38.       <div class="changeListText"><a href="3.html" target="_blank">Js/jQuery带左右箭头+按钮弹性滑动焦点图</a></div>  
  39.     </dd>  
  40.   </dl>  
  41.   <dl>  
  42.     <dt id="b5" onmouseover="changebox(5);" style="display: none;">  
  43.       <p>站建设、网站制作</p>  
  44.       <em><img src="images/shu5.gif" width="29" height="37"></em></dt>  
  45.     <dd id="a5" style="display: block;">  
  46.       <h1><img src="images/shu1_5.gif" width="29" height="49"></h1>  
  47.       <div class="changeListText"><a href="2.html" target="_blank">js/jQuery仿腾讯/新浪图片展示网页特效</a></div>  
  48.     </dd>  
  49.   </dl>  
  50. </div>  
  51. <!--End-->  
  52. </div>  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_681.html