transitionend的运用案例
transitionend事件代表着过渡动画结束后
原生的绑定方法
obj.addEventListener('transitionEnd', function(){
//do soming
})
我们能拿这个过渡结束事件做些什么事呢？
比如我们在用CSS3写的一个过渡动画，当过渡结束后，进行回调，
下面给出一个小案例
当我们用CSS3过渡去写一个无缝的轮播，过渡结束时候判断图片是否到达了最后一张，然后进行去掉过渡属性，并回到第一张图片的位置。
主意:该案例是移动端的案例，处理了webkit内核浏览器的性能加速，建议用chrome测试
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>transitonend实现的轮播案例</title>
</head> <style type="text/css">
* {
margin: 0;
padding: 0;
} li {
list-style: none;
} #wrap {
width: 26.66666667rem;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 8.544166667rem;
} .banner {
position: absolute;
left: 0px;
} .banner li {
width: 26.66666667rem;
float: left;
height: 8.544166667rem;
} img {
width: 100%;
} .change {
position: absolute;
bottom: 1rem;
text-align: center;
width: 100%;
opacity: 0.8;
} .change li {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #666;
margin: 0 0.2rem;
} .change .on {
background: red;
}
</style> <body>
<div id="wrap"></div>
</body> <script type="text/javascript">
//控制跟元素的rem
function initSize() {
var win_w = document.body.offsetWidth;
var min_w;
var fontSize;
if(win_w > 640) {
fontSize = 24;
} else {
min_w = Math.max(320, win_w);
fontSize = min_w / 320 * 12
}
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
} onresize = initSize;
initSize();
function Slider(opts) {
this.wrap = opts.obj;
this.list = opts.list;
this.nav = opts.nav;
this.time = opts.time;
//构造三部曲
this.init()
this.renderDom();
this.bindDom();
}
//初始化
Slider.prototype.init = function() {
this.index = 0;
this.scale = this.wrap.offsetWidth;
}
//动画函数原型链
Slider.prototype.go = function(n) {
var that = this;
var Oul = that.Oul;
var index = that.index;
var scale = that.scale;
var lis = Oul.getElementsByTagName('li');
var len = that.list.length;
var i; Oul.style.webkitTransition = 'all 0.2s ease-out';
i = index + n * 1;
Oul.addEventListener('webkitTransitionEnd', function() {
if(i >= len - 2) {
Oul.style.webkitTransition = 'none';
Oul.style.left = -that.scale + 'px';
i = 0;
//小圆点部分判断
if(that.nav) {
that.Ouli.firstChild.className = 'on';
}
} else if(i < 0) {
i = len - 3;
Oul.style.webkitTransition = 'none';
Oul.style.left = -(len - 2) * that.scale + 'px';
//小圆点部分判断
if(that.nav) {
that.Ouli.lastChild.className = 'on';
}
}
//保留当前图片索引值
that.index = i;
})
Oul.style.left = -(i + 1) * that.scale + 'px';
//开启小圆点
if(that.nav) {
var Ouli = that.Ouli.getElementsByTagName('li');
for(var a = 0; a < len - 2; a++) {
if(Ouli[a].className == 'on') {
Ouli[a].className = '';
}
}
Ouli[i] && (Ouli[i].className = 'on');
} }
//渲染页面的原型链
Slider.prototype.renderDom = function() {
var wrap = this.wrap;
var data = this.list;
var len = data.length;
var scale = this.scale
//创建函数
this.Oul = document.createElement('ul');
//遍历图片数据
for(var i = 0; i < len; i++) {
var li = document.createElement('li');
var item = data[i];
if(item) {
li.innerHTML = '<img src="' + item['src'] + '"/>'
} this.Oul.appendChild(li);
}
this.Oul.className = 'banner';
this.Oul.style.left = -scale + 'px';
this.Oul.style.width = +len * scale + 'px'
wrap.appendChild(this.Oul);
//开启小圆点
if(this.nav) {
this.Ouli = document.createElement('ul');
for(var i = 0; i < len - 2; i++) {
var li = document.createElement('li');
this.Ouli.appendChild(li);
}
this.Ouli.className = 'change';
wrap.appendChild(this.Ouli);
this.Ouli.firstChild.className = 'on';
} }
//绑定事件函数原型链
Slider.prototype.bindDom = function() {
var that = this;
var len = that.list.length - 2;
var Oul = that.Oul;
var scale = that.scale;
var offsetLeft;
var time = that.time;
//绑定定时器
function next() {
that.go('1')
}
var timer = setInterval(next, time)
//触摸开始
var startHandler = function(event) {
//记录刚开始接触屏幕的时间
that.startTime = new Date() * 1;
//记录刚开始接触屏幕的位置
that.startX = event.touches[0].pageX;
//清楚偏移量
that.offsetX = 0;
offsetLeft = Oul.offsetLeft;
//清楚定时器
clearInterval(timer);
}
//触摸滑动过程
var moveHandler = function(event) {
//阻止浏览器默认触摸事件
event.preventDefault();
//计算偏移量
that.offsetX = event.touches[0].pageX - that.startX;
//图片随手指移动
Oul.style.webkitTransition = 'none';
Oul.style.left = +offsetLeft + that.offsetX + 'px'; }
//触摸结束
var endHandler = function(event) {
//记录手指离开屏幕时的位置
var endTime = new Date() * 1;
//获取滑动边界值
var boundary = scale / 3
//判断快滑动还是慢滑动
if(endTime - that.startTime > 300) {
if(that.offsetX > boundary) {
//下一页
that.go('-1');
} else if(that.offsetX < -boundary) {
//上一页
that.go('1');
} else {
//留在本页
that.go('0');
}
} else {
if(that.offsetX > 50) {
that.go('-1');
} else if(that.offsetX < -50) {
that.go('1');
} else {
that.go('0');
}
}
timer = setInterval(next, time);
} //事件绑定
Oul.addEventListener('touchstart', startHandler);
Oul.addEventListener('touchmove', moveHandler);
Oul.addEventListener('touchend', endHandler);
} var list = [{
src: 'img/5.jpg'
}, {
src: 'img/1.jpg'
}, {
src: 'img/2.jpg'
}, {
src: 'img/3.jpg'
}, {
src: 'img/4.jpg'
}, {
src: 'img/5.jpg'
}, {
src: 'img/1.jpg'
}]; new Slider({
//传入对象
'obj': document.getElementById('wrap'),
//传入数据
'list': list,
//是否开启小圆点，默认是false
'nav': true,
//自动播放时间
'time': 3500
})
</script> </html>
transitionend的运用案例的更多相关文章
- JavaScipt30(第一个案例)（主要知识点：键盘事件以及transitionend）
今天得到一个github练习项目,是30个原生js写成的小例子,麻雀虽小五脏俱全,现在记录一下第一个. 第一个是键盘按键时页面上对应的键高亮,同时播放音频,松开后不再高亮. 我自己实现了一下,然后查看 ...
- JD_M案例知识点（移动端）
# JD_M案例知识点 基础布局+顶部通栏+顶部轮播图+导航栏 知识点 base.css ::before,::after 伪元素 统一设置文字 sans-serif 移动端 的默认字体 font-f ...
- JavaScript 入门案例
四. JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇 https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...
- JavaScipt30(第五个案例)（主要知识点：flex布局）
承接上文,这是第5个案例:这节没什么讲的,随便记录下吧,主要是用了flex布局与transform translateY,js部分和案例1类似. 附上项目链接: https://github.com/ ...
- 无缝轮播的案例 及css3无缝轮播案例
无缝轮播的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- webapi_3 今天真真真全是大经典案例
这个项目一多起来了,还是分个序号比价好一点,你好我好大家好,然后关于这个标点符号的问题,我打字真的很不喜欢打标点符号,不是不好按,按个逗号其实也是顺便的事情,可能就是养成习惯了,就喜欢按个空格来分开, ...
- 数据库优化案例——————某市中心医院HIS系统
记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...
- SQL Server内存遭遇操作系统进程压榨案例
场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...
- solr_架构案例【京东站内搜索】(附程序源代码)
注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...
随机推荐
- Google App Engine, Python2.7的UnicodeDecodeError bug
在跟Web Development,要在Google App Engine上写作业,出师不利,遇到以下bug: 2014-05-06 16:14:17 Running command: "[ ...
- system verilog中的类型转换（type casting）、位宽转换（size casting）和符号转换（sign casting）
类型转换 verilog中,任何类型的任何数值都用来给任何类型赋值.verilog使用赋值语句自动将一种类型的数值转换为另一种类型. 例如,当一个wire类型赋值给一个reg类型的变量时,wire类型 ...
- js疑问
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];var aCopy = arr.slice();aCopy; // ['A', 'B', 'C', 'D', ...
- ORM艰辛路之EF
经过一段时间对EF的研究,发现EF还是有很大的作用的,起码比自己写代码快捷许多.不过往往一个学习一个新东西开始都是简单的,后面才慢慢了解到它的许多不方便 优点: EF在对一个实体的增删改以及继承方面做 ...
- Android自动化学习笔记之Robotium:学习官网实例
---------------------------------------------------------------------------------------------------- ...
- xxx.app已损坏,打不开.你应该将它移到废纸篓 macOS 10.12 Sierra
出现这个问题的解决方法: 修改系统配置:系统偏好设置... -> 安全性与隐私.修改为任何来源 如果没有这个选项的话 (macOS Sierra 10.12) ,打开终端,执行 sudo spc ...
- 解决MD5问题
使用VS时报错此实现不是 Windows 平台 FIPS 验证的加密算法的一部分. 解决方案如下:在window中打开功能里输入regedit,回车打开注册器.然后进入如下路径中 HKEY_LOCAL ...
- C语言指针变量作为函数参数
0x01 指针变量作为函数参数的作用是:将一个变量的地址传送到另一个函数中. 0x02 简单的例子:虽然都能实现功能,但意义不同. 正确的写法: #include <stdio.h> vo ...
- Ninject之旅之七：Ninject依赖注入
摘要 可以使用不同的模式向消费者类注入依赖项,向构造器里注入依赖项是其中一种.有一些遵循的模式用来注册依赖项,同时有一些需要避免的模式,因为他们经常导致不合乎需要的结果.这篇文章讲述那些跟Ninjec ...
- 一个C#语法高亮插件
语法高亮对程序员阅读代码来说有着不小的帮助,虽然VisualStudio本身支持C#语法高亮,但也只是对关键字.类名.字符串等少数元素加了标记,而我们代码中主题:变量.函数.属性.事件等都没有进行高亮 ...