Bootstrap入门(二十五)JS插件2:过渡效果
对于简单的过渡效果,只需将 transition.js
和其它 JS 文件一起引入即可。如果你使用的是编译(或压缩)版的bootstrap.js
文件,就无需再单独将其引入了。
Transition.js 是针对 transitionEnd
事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
通过代码啦展现一下
先创建一个有id的div,这里div的id为mydiv,内容直接为空
<div id="mydiv"> </div>
为他添加一些样式,#mydiv下的是刚打开页面时的样式,而#mydiv:hover是鼠标滑过时的样式
宽度变成原来的四倍,红色的,2s完成
<style>
#mydiv{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
#mydiv:hover{
width: 400px;
}
</style>
然后,为这个过渡效果写一些js代码
<script>
document.getElementById("mydiv").addEventListener("transitionend",function(e){
this.innerHTML = "过渡事件,完成"
})
</script>
初始效果
鼠标滑过时:渐渐变宽
最终,显示文字
Bootstrap入门(二十五)JS插件2:过渡效果的更多相关文章
-
Bootstrap <;基础二十五>;警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
-
Bootstrap入门(十五)组件9:面板组件
Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...
-
网站开发进阶(二十五)js如何将html表格导出为excel文件
js如何将html表格导出为excel文件 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...
-
[WebGL入门]二十五,点光源的光照
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...
-
Bootstrap <;基础二十八>;列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
-
Bootstrap <;基础二十九>;面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
-
Bootstrap <;基础二十六>;进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
-
Bootstrap<;基础二十四>; 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
-
Bootstrap <;基础二十二>;超大屏幕(Jumbotron)
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
-
Bootstrap<;基础二十>; 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
随机推荐
-
POJ3693 Maximum repetition substring [后缀数组 ST表]
Maximum repetition substring Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9458 Acc ...
-
RxSwift 系列(六) -- Mathematical and Aggregate Operators
前言 本篇文章将要学习RxSwift中数学和集合操作符,在RxSwift中包括了: toArray reduce concat toArray 将一个Observable序列转化为一个数组,并转换为一 ...
-
基于PLC-C#串口通讯,温度检测和转速监控的c#/.Net实现。
我司为五金加工企业,其中有一条喷涂车间和流水线,客户要求能实时监控炉温温度.流水线速,并设置上下限值,达到上下限时报警. 开始考虑过USB的温度采集器,但是却没有找到带USB的光电开关,并且线路长度受 ...
-
python基础学习篇章一
一. 对Python的认识 1. Python的标准实现方式是将源代码的语句编译为字节码的形式,之后再将字节码解释出来.由于字节码是一种与平台无关的形式,字节码具有可移植性.但是Python没有将代码 ...
-
iOS开发者学习Flutter
Flutter for iOS 开发者 本文档适用那些希望将现有 iOS 经验应用于 Flutter 的开发者.如果你拥有 iOS 开发基础,那么你可以使用这篇文档开始学习 Flutter 的开发. ...
-
redis 在 php 中的应用(key篇)
本文为我阅读了 redis参考手册 之后结合 博友的博客 编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: KEY(键) DEL ...
-
1159 Palindrome
Palindrome Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 68562 Accepted: 23869 Desc ...
-
Codeforces Round #539 (Div. 2) D 思维
https://codeforces.com/contest/1113/problem/D 题意 将一个回文串切成一段一段,重新拼接,组成一个新的回文串,问最少切几刀 题解 首先无论奇偶串,最多只会切 ...
-
StringRedisTemplate操作redis数据
StringRedisTemplate与RedisTemplate区别点 两者的关系是StringRedisTemplate继承RedisTemplate. 两者的数据是不共通的:也就是说String ...
-
sql 表,字段(列),表数据(行)相关命令
随便转载,保留出处:http://www.cnblogs.com/aaron-agu/ 注: 以下所有操作都在登陆数据库后执行 命令use test; test为数据库名 查看表 show tabl ...