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 相关文章推荐
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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
PHP新手上路(三)
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
JS 统计时间
2021/03/09 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
简单了解python列表和元组的区别
2020/05/14 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
幼儿园大班区域活动总结
2014/07/09 职场文书
团队执行力培训心得体会
2015/08/15 职场文书