Bootstrap轮播加上css3动画,炫酷到底!


Posted in Javascript onDecember 22, 2015

很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能。同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话。你可以参考一下bootstrap官方组件。
介绍Animate.css

为了让我自己写的动画效果值得称赞,我用一个非常有名的开源的CSS3动画库,被形象的称为animate.css。 Dan Eden写的。

这是让我能专注于手头的任务,而不是解释CSS3动画的代码。

用Animate.css 需要2个步骤:

在html文档中引入animate.min.css。
在网页中要加动画的元素上添加animated yourchosenanimation类。
接下来你用Animate.css网站上的看到的关于动画的类名,代替yourchosenanimation。

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

  • 轮播指示显示幻灯的页面数量,给用户提供一个视觉线索,并提供可以滑动的导航。
  • 轮播条目,一个叫.carousel-inner的类,包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。
  • 最后,是轮播控制箭头,功能是可以使用户前后滑动。

Bootstrap轮播加上css3动画,炫酷到底!

如果想了解更多Bootstrap轮播组件的详情,可以查看Syed Fazle Rahman的用Bootstrap3创建js轮播效果这篇文章。

为了简单的展示demo,就先不加图片了。焦点先放在轮播框架上作为动画。

构建HTML结构

下边是你需要引用到你项目当中的:

  • jQuery
  • Bootstrap's CSS and JavaScript
  • Animate.css
  • 一个样式表和js文档。

为了加快开发进程,从Bootstrap官网引用了模板和必要的文件。

下边是Bootstrap轮播代码:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
 </li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 
 <!-- First slide -->
 <div class="item active">
 <div class="carousel-caption">
 <h3 data-animation="animated bounceInLeft">
 This is the caption for slide 1
 </h3>
 <h3 data-animation="animated bounceInRight">
 This is the caption for slide 1
 </h3>
 <button class="btn btn-primary btn-lg"
 data-animation="animated zoomInUp">Button</button>
 </div>
 </div><!-- /.item -->
 
 <!-- Second slide -->
 <div class="item">
 <div class="carousel-caption">
 <h3 class="icon-container" data-animation="animated bounceInDown">
 <span class="glyphicon glyphicon-heart"></span>
 </h3>
 <h3 data-animation="animated bounceInUp">
 This is the caption for slide 2
 </h3>
 <button class="btn btn-primary btn-lg"
 data-animation="animated zoomInRight">Button</button>
 </div>
 </div><!-- /.item -->
 
 <!-- Third slide -->
 <div class="item">
 <div class="carousel-caption">
 <h3 class="icon-container" data-animation="animated zoomInLeft">
 <span class="glyphicon glyphicon-glass"></span>
 </h3>
 <h3 data-animation="animated flipInX">
 This is the caption for slide 3
 </h3>
 <button class="btn btn-primary btn-lg"
 data-animation="animated lightSpeedIn">Button</button>
 </div>
 </div><!-- /.item -->
 </div><!-- /.carousel-inner -->
 
 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic"
 role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 
 <a class="right carousel-control" href="#carousel-example-generic"
 role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>
 
</div><!-- /.carousel -->

如果以上代码没有错,你在浏览器打开会看到一个可以运行的轮播,上边的一切不包含一行javascript代码。如果你不添加任何图像,只是在css文档给.carousel .item这个类块添加min-height值防止轮播塌陷。

在轮播标题内的元素添加一个动画属性data-animation,用这个特别的动画类库作为他们的值。

如果你想从Animate.css库体验其他的动画,用你选择的动画类名代替data-animation属性值。

我们在javascript代码中用data-animation属性值。

虽然一个简单的自动轮播在一些案例中可以找到,但是对于这个案例我们有更多的控制。

在这个方向的第一步,从元素中删除data-ride="carousel"值,把data-ride属性值初始化儿不用写任何代码。但是,我们打算用js代码控制轮播,因此,这个data-ride属性就不必要了。 

给轮播加CSS样式

现在根据自己的喜好,发挥创造力给轮播标题添加样式。我将要写的样式规则是能顺畅工作的demo。

更具体的说,我们增加动画延迟属性的控制。定义每个动画什么时候开始(注意为了简单演示,省略了浏览器前缀)

.carousel-caption h3:first-child {
 animation-delay: 1s;
}
 
.carousel-caption h3:nth-child(2) {
 animation-delay: 2s;
}
 
.carousel-caption button {
 animation-delay: 3s;
}

上面的代码片段中确保元素动画有序开始,还可以做其他的效果。例如,你可以选择前两个标题同时出现,然后是button按钮,可以自己决定,享受乐趣吧。

写jQuery代码:

我们开始初始化这个轮播,在你的自定义的javascript 文件中添加一下代码:

var $myCarousel = $('#carousel-example-generic');
// Initialize carousel
$myCarousel.carousel();

我们已经动态的设置了轮播,接下来,我们来解决这个动画。

为了使第一个幻灯片的标题有动画,当页面在浏览器加载完后脚本得运行。随后的幻灯片在动画下进入到我们的视野,我们的代码在slide.bs.carousel 事件上运行。意味着同样的代码运行两次:页面加载一次和slide.bs.carousel 事件一次。

因为我们喜欢遵循不重复的原则,我们打算把我们的代码封装在函数中,并在适当的时候引用。

代码:

function doAnimations(elems) {
 var animEndEv = 'webkitAnimationEnd animationend';
 elems.each(function () {
 var $this = $(this),
 $animationType = $this.data('animation');
 // Add animate.css classes to
 // the elements to be animated 
 // Remove animate.css classes
 // once the animation event has ended
 $this.addClass($animationType).one(animEndEv, function () {
 $this.removeClass($animationType);
 });
 });
}
// Select the elements to be animated
// in the first slide on page load
var $firstAnimatingElems = $myCarousel.find('.item:first')
  .find('[data-animation ^= "animated"]');
// Apply the animation using our function
doAnimations($firstAnimatingElems);
// Pause the carousel 
$myCarousel.carousel('pause');
 
// Attach our doAnimations() function to the
// carousel's slide.bs.carousel event 
$myCarousel.on('slide.bs.carousel', function (e) { 
 // Select the elements to be animated inside the active slide 
 var $animatingElems = $(e.relatedTarget)
  .find("[data-animation ^= 'animated']");
 doAnimations($animatingElems);
});

上边的代码 我们来分析一下。

1、来看doAnimations()函数

这个doAnimations() 函数执行的任务如下。

它开始通过缓存变量中含有的animationend事件名称的字符串。这个事件告诉我们,你可能已经猜到,当每个动画结束。我们需要这个点的信息,因为每一次的动画结束后,我们将animate.css类移除。如果我们不做移除,轮播的标题将只有一次动画,也就是,只是在第一次轮播显示特定的幻灯片。

var animEndEv = 'webkitAnimationEnd animationend';

接来下,我们的函数循环遍历每一个我们想要有动画的元素,并获取data-animation的属性值。想上边所说的,这个值包含我们想要添加给元素的Animate.css类,以便有动画效果。

elems.each(function () {
 var $this = $(this),
 $animationType = $this.data('animation'); 
 // etc...
});

最后,这个doAnimations() 函数动态添加animate.css类的每个要执行动画的元素上,当动画结束的时候,还附加了一个事件监听。动画结束后我们移除从Animate.css添加的类。这样确保下一个轮播灯片回到当前的区域。(你试着删除这段代码,看看会发生什么)

$this.addClass($animationType).one(animEndEv, function () {
 $this.removeClass($animationType);
});

2、第一个标题的动画

当页面在浏览器中加载时,我们在第一个幻灯片中动画的内容:

var $firstAnimatingElems = $myCarousel.find('.item:first')
  .find("[data-animation ^= 'animated']"); 
doAnimations($firstAnimatingElems);

在这个代码中,我们找到第一张灯片,我们希望通过使用data-animation从动画的标题获取动画属性的值。然后我们把变量 $firstAnimatingElems 当做参数传给doAnimations()函数,然后执行函数。

3、轮播的停止功能

当第一张灯片内容执行完动画以后,我们停止这个轮播功能。

$myCarousel.carousel('pause');

这是Bootstrap轮播组件防止不停旋转的特征。不停的旋转,可能会让访客生厌。

在这种情况下,我建议确保轮播不直接循环到下一个灯片直到所有的动画运行完毕。可以通过设置在初始化代码中的“间隔”选项来控制这个:

$myCarousel.carousel({
 interval: 4000
});

在我看来,一个无限循环轮播标题跳跃每一次的滑动进入视线不理想。

 4、轮播幻灯片标题的动画

为每张幻灯片的动画轮播标题变得可见需要以下描述的步骤。

首先,我们在slide.bs.carousel上添加一个事件监听器。

当幻灯片实例方法被调用时,该事件立即触发。

$myCarousel.on('slide.bs.carousel', function (e) { 
 // do stuff...
});

接下来,我们选择当前的灯片,找到我们希望增加动画的元素。下边的代码用了slide.bs.carousel事件的.relatedTarget属性来绑定动画。

var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");

最后,我们调用doAnimations()函数,把$animatingElems当做参数传进去。

doAnimations($animatingElems);

正如你们许多人可能知道,轮播有一些需要开发者考虑的问题。

在这篇文章中,展示了如何添加一些额外的精力,用几行jQuery和animate.css库用在基本的Bootstrap轮播组件。然而,其他类似的css库,或者css3动画,我们会做的一样好,希望这篇文章可以给大家带来更多的启发,打开大家的学习思路。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
js实现抽奖功能
Nov 24 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 #Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 #Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 #Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 #Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 #Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 #Javascript
JavaScript判断对象是否为数组
Dec 22 #Javascript
You might like
php.ini中date.timezone设置分析
2011/07/29 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解使用Python下载文件的几种方法
2019/10/13 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
《影子》教学反思
2014/02/21 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
安全员岗位职责范本
2015/04/11 职场文书
法定授权委托证明书
2015/06/18 职场文书
五年级作文之想象作文
2019/10/30 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers