首页>>Jquery图片>>漂亮的手风琴效果(2019-05-30)

漂亮的手风琴效果

漂亮的手风琴效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="freejs">  
  2.         <div class="options">  
  3.             <div class="option active" style="--optionBackground:url(../images/1.jpg);">  
  4.                 <div class="shadow"></div>  
  5.                 <div class="label">  
  6.                     <div class="icon">  
  7.                         <i class="fas fa-walking"></i>  
  8.                     </div>  
  9.                     <div class="info">  
  10.                         <div class="main">这是标题</div>  
  11.                         <div class="sub">这是一段描述</div>  
  12.                     </div>  
  13.                 </div>  
  14.             </div>  
  15.             <div class="option" style="--optionBackground:url(../images/2.jpg);">  
  16.                 <div class="shadow"></div>  
  17.                 <div class="label">  
  18.                     <div class="icon">  
  19.                         <i class="fas fa-snowflake"></i>  
  20.                     </div>  
  21.                     <div class="info">  
  22.                         <div class="main">freejs</div>  
  23.                         <div class="sub">http://www.freejs.net/</div>  
  24.                     </div>  
  25.                 </div>  
  26.             </div>  
  27.             <div class="option" style="--optionBackground:url(../images/3.jpg);">  
  28.                 <div class="shadow"></div>  
  29.                 <div class="label">  
  30.                     <div class="icon">  
  31.                         <i class="fas fa-tree"></i>  
  32.                     </div>  
  33.                     <div class="info">  
  34.                         <div class="main">这是标题</div>  
  35.                         <div class="sub">这是一段描述</div>  
  36.                     </div>  
  37.                 </div>  
  38.             </div>  
  39.             <div class="option" style="--optionBackground:url(../images/2.jpg);">  
  40.                 <div class="shadow"></div>  
  41.                 <div class="label">  
  42.                     <div class="icon">  
  43.                         <i class="fas fa-tint"></i>  
  44.                     </div>  
  45.                     <div class="info">  
  46.                         <div class="main">这是标题</div>  
  47.                         <div class="sub">这是一段描述</div>  
  48.                     </div>  
  49.                 </div>  
  50.             </div>  
  51.             <div class="option" style="--optionBackground:url(../images/1.jpg);">  
  52.                 <div class="shadow"></div>  
  53.                 <div class="label">  
  54.                     <div class="icon">  
  55.                         <i class="fas fa-sun"></i>  
  56.                     </div>  
  57.                     <div class="info">  
  58.                         <div class="main">这是标题</div>  
  59.                         <div class="sub">这是一段描述</div>  
  60.                     </div>  
  61.                 </div>  
  62.             </div>  
  63.         </div>  
  64.     </div>  

 

JavaScript Code
  1. $(".option").click(function () {  
  2.     $(".option").removeClass("active");  
  3.     $(this).addClass("active");  
  4. });  

 


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