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


Posted in Javascript onNovember 20, 2015

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

效果图:

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

具体代码如下:

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程序设计。

Javascript 相关文章推荐
JS继承 笔记
Jul 13 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
js时间查询插件使用详解
Apr 07 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 #Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 #Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 #Javascript
jquery实现手风琴效果
Nov 20 #Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 #Javascript
jquery背景跟随鼠标滑动导航
Nov 20 #Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
让PHP支持页面回退的两种方法
2008/01/10 PHP
php异常处理使用示例
2014/02/25 PHP
PHP生成随机密码类分享
2014/06/25 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
如何表示python中的相对路径
2020/07/08 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
财务总监岗位职责
2014/03/07 职场文书
求职信格式要求
2014/05/23 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸