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 ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
angularjs基础教程
Dec 25 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
js轮播图代码分享
Jul 14 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
原生JavaScript实现刮刮乐
Sep 29 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 mcrypt可逆加密算法分析
2011/07/19 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JS获取父节点方法
2009/08/20 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python 实现登录网页的操作方法
2018/05/11 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python 实现图片批量压缩的示例
2020/12/18 Python
html5时钟实现代码
2010/10/22 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
保护环境倡议书
2014/04/14 职场文书
安全环保标语
2014/06/09 职场文书
财务管理专业求职信
2014/06/11 职场文书
服装设计专业求职信
2014/06/16 职场文书
实训报告范文大全
2014/11/04 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技