您的位置:首页> 日志> 动易系统 正文

 

   看见上面的效果是不是很心动能、下面我们就来简述如何制作这个效果。这个效果非常流行的一个滑动效果、非常的炫丽、在很早以前就制作出来了一直没时间整理出来也一下忘记它。\(^o^)/~

  1. <ul class="hoverSelectList"> 
  2.  {PE.Label id="内容带图片的信息列表" imageWidth="80"  imageHeight="60"  contentLength="100"  bindStyle="滑动切换式" ListOrderType="3" outputQty="10" titleLength="20" nodes="0"  displayTips="true" /} 
  3. </ul> 
  4. <script type="text/javascript"> 
  5.     hoverSelectList(".hoverSelectList"); 
  6.   </script> 
  7.  

以上是为这个效果特殊制作的一个标签、代码。

  1. <ul class="hoverSelectList"> 
  2.   <li class="hover"> 
  3.     <div class="min"> 
  4.      <!--没有滑过时显示的标题效果-->  
  5.     标题…… 
  6.     </div> 
  7.     <div class="max"> 
  8.     <!--滑过时的显示的效果、还可以扩充哦(*^__^*) 亲--> 
  9.       <div class="pe_u_thumb"><a href="###" target="_blank"><img src="图片链接地址" border="0"></a></div> 
  10.       <div class="pe_u_thumb_title"><a class="title" href="###" target="_blank">标题…… </a> 
  11.         <p class="Intro">很多很多内容----其他</p> 
  12.       </div> 
  13.     </div> 
  14.   </li> 
  15.  <li> 
  16.     <div class="min">标题…… </div> 
  17.     <div class="max"> 
  18.       <div class="pe_u_thumb"><a href="###" target="_blank"><img src="图片链接地址" border="0"></a></div> 
  19.       <div class="pe_u_thumb_title"><a class="title" href="###" target="_blank">标题…… </a> 
  20.         <p class="Intro">很多很多内容----其他</p> 
  21.       </div> 
  22.     </div> 
  23.   </li> 
  24. </ul> 

简单的一段HTML 结构、还可以根据自己的需要进行调整、主要在DIV.MAX内扩展 

 

展示效果:http://dtop.powereasy.net/Category_409/Index.aspx

(标签、JS)下载地址