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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
javascript三种代码注释方法
Jun 02 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
javascript实现计算器功能详解流程
Nov 01 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导出Word文档的原理和实例
2013/10/21 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
Javascript typeof 用法
2008/12/28 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jquery获取节点名称
2015/04/26 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
存储过程和函数的区别
2013/05/28 面试题
大班幼儿评语大全
2014/04/30 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python