位置: 编程技术 - 正文

Bootstrap轮播加上css3动画,炫酷到底!(bootstrap轮播效果)

编辑:rootadmin

推荐整理分享Bootstrap轮播加上css3动画,炫酷到底!(bootstrap轮播效果),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap轮播按钮,bootstrap轮播图居中,bootstrap自定义轮播图大小,bootstrap自定义轮播图大小,bootstrap轮播图居中,bootstrap轮播图怎么制作,bootstrap轮播图怎么制作,bootstrap 轮播,内容如对您有帮助,希望把文章链接给更多的朋友!

很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能。同时你的项目是采用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轮播组件的详情,可以查看Syed Fazle Rahman的用Bootstrap3创建js轮播效果这篇文章。

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

构建HTML结构

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

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

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

下边是Bootstrap轮播代码:

如果以上代码没有错,你在浏览器打开会看到一个可以运行的轮播,上边的一切不包含一行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。

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

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

写jQuery代码:

Bootstrap轮播加上css3动画,炫酷到底!(bootstrap轮播效果)

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

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

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

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

代码:

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

1、来看doAnimations()函数

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

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

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

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

2、第一个标题的动画

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

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

3、轮播的停止功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

标签: bootstrap轮播效果

本文链接地址:https://www.jiuchutong.com/biancheng/386357.html 转载请保留说明!

上一篇:IE6-IE9使用JSON、table.innerHTML所引发的问题(22号天蝎座的运势)

下一篇:js仿微博实现统计字符和本地存储功能(微博html代码)

  • 买一赠一的税务怎么算
  • 以前年度多交增值税
  • 劳务发票打款用途写什么
  • 购买水果属于什么费用
  • 印花税不计入应交税科目吗?
  • 开票打印机可以自己买吗
  • 电子发票有使用期限吗
  • 清算后剩余财产归一方所有
  • 资产负债表应付账款怎么算
  • 年偿债基金和年金现值
  • 同一控制下资产收购
  • 通过认证的增值税怎么算
  • 开广告公司需要营业执照吗
  • 机器设备折旧计提规定
  • 现金折扣销售退回的会计分录
  • 以旧换新如何确认收入
  • 收到社保补差款怎么办
  • 调拨入库的固定资产是否缴税?
  • 公司处于亏损状态退股
  • 融资租入固定资产
  • 国税的申报表季报本月数如何填写?
  • 销项税额抵减是怎么回事
  • 递延所得税资产怎么计算
  • 商业折扣销售会计分录
  • 购买股权属于什么科目
  • 同期比较百分比如何计算
  • 个人如何申报初级医师职称
  • 财务部水电费会计分录
  • 财政拨款税务处理方法
  • 进口报关单保费
  • 礼品应该计入会计分录
  • thinkphp5开发教程
  • arm on windows
  • 电脑自动更新系统
  • 外籍人员个人所得税计算
  • 银行对公账户收款码
  • linux内存缓存
  • 脐橙产业可行性报告
  • 阿根廷圣克鲁斯省
  • 【JavaScript】【5】定时器(包含回调函数与Promise)
  • apt-show-versions
  • 年底所得税怎么算
  • 合并报表的收入就是相加么
  • 个体户转账到法人账户要交税吗
  • 业务招待费的报销额度是多少
  • 免抵退税额怎么计算城建税
  • MicrosoftSQLserver2014
  • 收据入帐
  • 发票已经勾选却统计不出来
  • 小规模纳税人通行费可以抵扣吗
  • 预收帐款
  • 劳务外包人员算从业人员期末人数么
  • 别人公司过账用自己的银行卡会查吗
  • 个税专项附加扣除标准调整
  • 分销佣金账务处理流程
  • 物流辅助服务费属于什么费用
  • 押金为什么要走支付宝
  • 收据和收款收据的法律效力
  • 发票入账的时候能作废吗
  • 车票如何抵扣增值税
  • 应收股利在资产负债表中怎么填
  • 个体工商户如何给员工交五险一金
  • 动态sql语句
  • sql 截取字符串某个字符之后
  • ubuntu设置u盘启动项
  • fedora s9
  • u盘安装win7系统教程图解
  • 进去界面黑屏
  • mplugin.exe是什么
  • linux shell命令大全
  • js下拉列表框
  • android方法大全
  • 深入理解javascript
  • javascript的简介
  • unity 子对象
  • u3d地形编辑贴图
  • JavaScript中void(0)的具体含义解释
  • 湖北省税务申报流程 个体户
  • 增值税专用发票提高限额
  • 药店开给个人的增值税发票是什么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设