这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 JavaScript 实现移动端轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码。首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到 js 中的与触摸操作有关的新事件。其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性。
下面,我简单介绍一下与触摸相关的知识
触摸事件
上面这几个事件都会冒泡,也都可以取消。
属性
每个 touch 对象包括下列属性
代码如下
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- 移动端轮播
- </title>
- <style type="text/CSS">
- * { margin: 0; padding: 0; } #box { width: 980px; overflow: hidden; position:
- relative; margin: 0 auto; } #box ul { width: 4900px; height: 100px; position:
- relative; transform: translateX(-980px); } #box ul li{ width: 980px; height:
- 100px; float: left; list-style-type: none; text-align: center; color: #fff;
- line-height: 100px; font-size: 30px; }
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var box = document.getElementById('box');
- var oUl = document.getElementsByTagName('ul')[0];
- var aLi = oUl.children; //这样就可以把所有li标签获取到了
- var iNow = 1;
- var x = -iNow * aLi[0].offsetWidth; //li标签的位置
- var bReady = true;
- oUl.addEventListener('touchstart',
- function(ev) {
- //当手指触摸屏幕的时候触发事件,让li的位置随手指滑动而改变
- if (bReady == false) {
- return;
- }
- bReady = false;
- var downX = ev.targetTouches[0].pageX; //记录触摸位置
- var disX = downX - x; //下一个li要移动到的位置
- function fnMove(ev) {
- x = downX - disX;
- oUl.style.transform = 'translate3d(' + x + 'px,0,0)';
- }
- function fnEnd(ev) {
- var upX = ev.changedTouches[0].pageX; //离开的位置
- if (Math.abs(upX - downX) > 50) {
- //左边移动
- if (upX - downX < 0) {
- iNow++;
- if (iNow == aLi.length) {
- iNow = aLi.length - 1;
- }
- } else {
- //右边移动
- iNow--;
- if (iNow == -1) {
- iNow = 0;
- }
- }
- }
- x = -iNow * aLi[0].offsetWidth;
- oUl.style.transform = 'translate3d(' + x + 'px,0,0)';
- oUl.style.transition = '200ms all ease';
- function tEnd() {
- if (iNow == 4) {
- iNow = 1;
- }
- if (iNow == 0) {
- iNow = 3;
- }
- oUl.style.transition = 'none'x = -iNow * aLi[0].offsetWidth;
- oUl.style.transform = 'translate3d(' + x + 'px,0,0)';
- bReady = true;
- }
- oUl.addEventListener('transitionend', tEnd, false);
- //释放内存
- document.removeEventListener('touchend', fnEnd, false);
- document.removeEventListener('touchmove', fnMove, false);
- }
- document.addEventListener('touchmove', fnMove, false);
- document.addEventListener('touchend', fnEnd, false);
- //阻止默认事件
- ev.preventDefault();
- },
- false);
- }
- </script>
- </head>
- <body>
- <div id="box">
- <ul>
- <li style="background:green">
- 3
- </li>
- <li style="background:orange">
- 1
- </li>
- <li style="background:yellow">
- 2
- </li>
- <li style="background:green">
- 3
- </li>
- <li style="background:orange">
- 1
- </li>
- </ul>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0813/338834.html