欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > HTML5应用 >
收 藏
2600

创意jQuery和CSS3滑动覆盖响应式幻灯片特效

所属栏目:HTML5应用 来源:未知 内容发布:做网站吧

    简要教程

  这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效。该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错。推荐阅读:之前分享过一款纯CSS3超酷全屏响应式幻灯片特效,代码仅有100多行,非常小巧。

 

查看演示     下载插件

 

  使用方法

  HTML结构

  该幻灯片的HTML结果由两部分组成:一个ul.cd-slider用于制作幻灯片,ol.cd-slider-navigation则用于制作幻灯片的导航。它们都被包裹在div.cd-slider-wrapper容器中。

01 <div class="cd-slider-wrapper">
02   <ul class="cd-slider">
03     <li class="is-visible">
04       <div class="cd-half-block image"></div>
05    
06       <div class="cd-half-block content">
07         <div>
08           <h2>Slide Number 1</h2>
09           <p>
10             <!-- 内容 -->
11           </p>
12         </div>
13       </div>
14     </li> <!-- .cd-half-block.content -->
15    
16     <li>
17       <!-- 第二个幻灯片项的内容 -->
18     </li>
19    
20     <!-- 其它的幻灯片项放在这里 -->
21   </ul> <!-- .cd-slider -->
22    
23   <!-- ol.cd-slider-navigation 元素会在这里使用jQuery来创建-->
24 </div> <!-- .cd-slider-wrapper -->

  需要注意的是幻灯片的导航元素ol.cd-slider-navigation不是直接插入到DOM中的,而是通过jQuery来动态添加的。

 

  CSS样式

 

  在小屏幕设备中(视口小于900px),幻灯片的结果非常简单:.cd-slider元素使用相对定位,它的所有<li>子元素都采用绝对定位,开始时位于左上角的位置。

 

  所有的列表项都通过translateX(100%)被移动到右侧屏幕之外。另外.is-visibleclass类用于将它们移动会屏幕中间(使用translateX(0))。

01 .cd-slider {
02   position: relative;
03   height: 100%;
04   overflow: hidden;
05 }
06 .cd-slider li {
07   position: absolute;
08   top: 0;
09   left: 0;
10   height: 100%;
11   width: 100%;
12   transform: translateX(100%);
13   transition: transform 0.6s;
14 }
15 .cd-slider li.is-visible {
16   transform: translateX(0);
17 }

  在大屏幕设备中,列表项通过translateX(0)移动会视口中,而他的两个子元素.cd-half-block.content和.cd-half-block.image被移动到屏幕的右侧,分别是translateX(200%)和translateX(100%)。

 

  当前被选择的幻灯片项被添加了.is-visible class之后,这两个.cd-half-block元素会被使用translateX(0)移动会屏幕中间。

 

  这里的动画都使用了CSS3 Transitions过渡动画效果。对于.cd-half-block.content元素,设置了0.6秒的transition-duration和0秒的transition-delay,而.cd-half-block.image元素则设置了0秒的transition-duration和0.3秒的transition-delay,这样,当.cd-half-block.content元素动画过渡进行到一半的时候,.cd-half-block.image元素就会立刻移动回屏幕的中间。可以通过下面的这张GIF图片来观察这个动画过程。

01 @media only screen and (min-width: 900px) {
02   .cd-slider li {
03     transform: translateX(0);
04   }
05   .cd-slider .cd-half-block {
06     height: 100%;
07     width: 50%;
08     float: right;
09   }
10   .cd-slider .cd-half-block.content {
11     transform: translateX(200%);
12     transition: transform 0.6s 0s ease-in-out;
13   }
14   .cd-slider .cd-half-block.image {
15     transform: translateX(100%);
16     transition: transform 0s 0.3s;
17   }
18   .cd-slider li.is-visible .cd-half-block.content,
19   .cd-slider li.is-visible .cd-half-block.image {
20     transform: translateX(0%);
21   }
22   .cd-slider li.is-visible .cd-half-block.content {
23     transition: transform 0.6s 0s ease-in-out;
24   }
25 }

 

  JavaScript

  该幻灯片特效中使用jQuery来动态插入幻灯片的导航按钮。

01 // sliderContainer = $('.cd-slider-wrapper')
02 var sliderPagination = createSliderPagination(sliderContainer);
03 function createSliderPagination(container){
04   var wrapper = $('<ol class="cd-slider-navigation"></ol>');
05   container.children('.cd-slider').find('li').each(function(index){
06     var dotWrapper = (index == 0) ? $('<li class="selected"></li>')
07                                   : $('<li></li>'),
08     dot = $('<a href="#0"></a>').appendTo(dotWrapper);
09     dotWrapper.appendTo(wrapper);
10     var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
11     dot.text(dotText);
12   });
13   wrapper.appendTo(container);
14   return wrapper.children('li');
15 }

  另外还使用jQuery来实现了基本的幻灯片功能,包括滑动触摸和幻灯片导航功能。

文章关键词:jquery  CSS3滑动  响应式幻灯  幻灯片特效  

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:Toolbar.js-实用的tooltip样式jQuery工具栏插件
下一篇:pageSwitch-支持121种过渡效果的JavaScript页面切换插件

返回顶部