基于jQuery手风琴带玻璃流光质感

基于jQuery手风琴带玻璃流光质感特效。这是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效。效果图如下:

在线预览   源码下载

实现的代码。

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();

via:http://www.w2bc.com/article/58246

时间: 2024-10-30 01:38:29

基于jQuery手风琴带玻璃流光质感的相关文章

基于jquery左侧带选项卡切换的焦点图

今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="film_focus"> <div class="film_focus_desc"> <h3> 标题1</h3> <ul class="film_focus_nav"> <li clas

一款基于jQuery的带Tooltip表单验证的注册表单

今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQuery表单实现非常简单,使用起来相对比较轻巧. 在线预览   源码下载 这款插件js要引用jquery.js库,还有一个easyform.js 库. html代码部分如下: <div class="form-div"> <form id="reg-form&q

基于jQuery右侧带缩略图导航的焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可实现图片的上下切换动画. 在线预览   源码下载 实现的代码. html代码: <div id="example5" class="slider-pro"> <div class="sp-slides"> <div cl

一款基于jQuery的带文字标题上下切换焦点图

今天给大家分享一款很实用的jQuery焦点图插件,它的最大特点就是使用非常方便,而且实现相对比较简单.焦点图的图片下方悬浮文字链接,鼠标滑过文字时即可切换至相应的图片,在图片切换的过程中出现淡入淡出的动画效果,简单而不乏韵味.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="i_box"> <div class="i_imglist"> <ul id="J_imgList"&

基于jquery的带事件显示功能的日历板插件calendar.js

项目中需要用到一个日历板控件,要求能显示事件,于是想到了一年前在app项目上写的一个粗略版日历板,然后又想着这个可能以后还会用 于是我就封装了一下,能满足基本要求,如果有需要更多功能的也可以自行修改源码,源码未压缩未代码混淆且有注释. 封装的是基础版,仅能展示一般日历板功能和正常显示事件数据. 再往后就涉及到项目的业务了,就不便展示了. 以下为地址: https://gitee.com/mluckydog/canlender 原文地址:https://www.cnblogs.com/syll/p

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

一款基于jquery带百分比的响应式进度加载条

今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美支持.一起看下效果图吧. 在线预览   源码下载 实现的代码. html代码: <h1> Battle.net <b>style progress bar</b></h1> <div class="progress"> <b

基于jQuery带备忘录功能的日期选择器

今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <header class="htmleaf-header">

一款基于jquery的手风琴显示详情

今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <span class="openzone" zone="lestrois" id="autoclicklestrois">NOW, OPEN THE THREE !</span