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 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
javascript 写类方式之三
Jul 05 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python实现计算最小编辑距离
2016/03/17 Python
Python之web模板应用
2017/12/26 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python3实现多线程聊天室
2018/12/12 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
详解python logging日志传输
2020/07/01 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
员工工作表扬信范文
2014/01/13 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
个人近期表现材料
2014/02/11 职场文书
产品委托授权书范本
2014/09/16 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
党员转正意见怎么写
2015/06/03 职场文书
Python OpenGL基本配置方式
2022/05/20 Python