jQuery实现带玻璃流光质感的手风琴特效

前端技术 2023/09/04 JavaScript

jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效，分享给大家，具体如下

效果图：

具体代码如下：

html代码：

<section class=\"strips\">
   <article class=\"strips__strip\">
     <div class=\"strip__content\">
       <h1 class=\"strip__title\" data-name=\"Lorem\">Awesome</h1>
     </div>
   </article>
   <article class=\"strips__strip\">
     <div class=\"strip__content\">
       <h1 class=\"strip__title\" data-name=\"Ipsum\">Words</h1>
       <div class=\"strip__inner-text\">
         <h2>Ettrics</h2>
 
         <script src=\"http://www.w2bc.com/scripts/2bc/_gg_980_90.js\" type=\"text/javascript\"></script>
 
         <p>
           <a href=\"#\" target=\"_blank\"><i class=\"fa fa-qq\"></i></a>
         </p>
       </div>
     </div>
   </article>
   <article class=\"strips__strip\">
     <div class=\"strip__content\">
       <h1 class=\"strip__title\" data-name=\"Dolor\">Go</h1>
       <div class=\"strip__inner-text\">
         <h2>Ettrics</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
         <p>
           <a href=\"#\" target=\"_blank\"><i class=\"fa fa-weibo\"></i></a>
         </p>
       </div>
     </div>
   </article>
   <article class=\"strips__strip\">
     <div class=\"strip__content\">
       <h1 class=\"strip__title\" data-name=\"Sit\">Inside</h1>
       <div class=\"strip__inner-text\">
         <h2>Ettrics</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
         <p>
           <a href=\"#\" target=\"_blank\"><i class=\"fa fa-weixin\"></i></a>
         </p>
       </div>
     </div>
   </article>
   <article class=\"strips__strip\">
     <div class=\"strip__content\">
       <h1 class=\"strip__title\" data-name=\"Amet\">Here</h1>
       <div class=\"strip__inner-text\">
         <h2>Ettrics</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
         <p>
           <a href=\"#\" target=\"_blank\"><i class=\"fa fa-leaf\"></i></a>
         </p>
       </div>
     </div>
   </article>
   <i class=\"fa fa-close strip__close\"></i>
 </section>

js代码：

      var Expand = function () {
      var tile = $(\'.strips__strip\');
      var tileLink = $(\'.strips__strip > .strip__content\');
      var tileText = tileLink.find(\'.strip__inner-text\');
      var stripClose = $(\'.strip__close\');
      var expanded = false;
      var open = function () {
        var tile = $(this).parent();
        if (!expanded) {
          tile.addClass(\'strips__strip--expanded\');
          tileText.css(\'transition\', \'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)\');
          stripClose.addClass(\'strip__close--show\');
          stripClose.css(\'transition\', \'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)\');
          expanded = true;
        }
      };
      var close = function () {
        if (expanded) {
          tile.removeClass(\'strips__strip--expanded\');
          tileText.css(\'transition\', \'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)\');
          stripClose.removeClass(\'strip__close--show\');
          stripClose.css(\'transition\', \'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)\');
          expanded = false;
        }
      };
      var bindActions = function () {
        tileLink.on(\'click\', open);
        stripClose.on(\'click\', close);
      };
      var init = function () {
        bindActions();
      };
      return { init: init };
    }();
    Expand.init();

希望本文可以给大家带来启发，帮助大家更好地学习jquery程序设计。

本文地址：https://www.stayed.cn/item/9433

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案