H5移动端开发基础（一）事件基础
事件基础
- 移动端基础事件
- 滑屏原理
- transform 与 transition
- 无缝滑屏自动播放幻灯片
移动端基础事件
手指按下：touchstart <==> mousedown
手指抬起：touchend <==> mouseup
手指移动：touchmove <==> mousemove
——touch事件 在chrome的模拟器下，部分版本通过on的方式来添加事件无效，有时候时好时坏，on的方式还会出现事件覆盖
——addEventListener(‘事件名’, 函数, 冒泡或捕获)
1) 不会存在前后覆盖问题
2) 在chrome的模拟器下可以一直识别
3) false-冒泡,true-捕获
**冒泡**：点击元素，它会把一个事件一直向上传递，从下向上传递
**捕获**：从上向下传递
4) 事件函数中 默认的第一个参数是event对象
5) e.preventDefault()：阻止默认事件
阻止掉 document touchstart的默认事件，可以解决：
①阻止页面上文字被选中，②阻止页面上的系统菜单
隐患：页面上的所有滚动条失效
6) e.stopPropagation()：阻止冒泡事件
7) 阻止document的touchmove或者touchstart，可以清除系统默认的回弹
——事件点透：PC端的鼠标事件 在移动端也可以正常使用，但是注意：事件的执行会有300ms的延迟
我们点击了页面后，浏览器会记录点击下去的坐标，然后300ms后，在该坐标找到现在在这里的元素 执行事件
解决办法：1) 阻止默认事件(部分安卓机型不支持)
2) 不在移动端使用鼠标事件，不用a标签做页面跳转
——touchEvent
touches：当前屏幕上的手指列表
targetTouches：当前元素的手指列表
changedTouches：触发当前事件的手指列表
滑屏原理
① 手指按下去的时候，记录下手指坐标
② 移动的时候，记录下手指坐标
③ 用移动后的坐标 - 移动前的坐标 = 手指移动的距离
④ 手指按下去的时候，记录下元素的位置
⑤ 移动之后，用手指移动的距离 + 元素的初始位置 = 元素现在所要在的位置
transform 与 transition
（1）transform/-webkit-transform（移动端）：
rotate：旋转 deg（度数）
scale：缩放
scaleX：X缩放
scaleY：Y缩放
translateX：X位移（px）
translateY：Y位移（px）
skewX：x斜切（度数）
skewY：y斜切（度数）
（2）transition：
transition-duration：动画时间
transition-delay：延迟时间
transition-property：要动画的样式
transtion-timing-function：动画形式
无缝滑屏自动播放幻灯片
<html>
<head>
<title>滑屏的幻灯片-自动播放title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<style type="text/css" id="css">
body{
margin: 0;
}
#wrap{
overflow: hidden;
position: relative;
}
#list{
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
list-style: none;
}
#list li{
float: left;
}
#list img{
width: 100%;
display: block;
}
#nav{
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
line-height: 10px;
text-align: center;
}
#nav span{
display: inline-block;
width: 10px;
height: 10px;
background: #c00;
border-radius: 5px;
}
#nav .active{
background: #0f0;
}
style>
<script type="text/javascript" src="transform.js">script>
<script type="text/javascript">
document.addEventListener('touchstart', function(e){
e.preventDefault();
});
window.onload = function(){
var wrap = document.querySelector('#wrap');
var list = document.querySelector('#list');
list.innerHTML += list.innerHTML;
var lis = document.querySelectorAll('#list li');
var css = document.querySelector('#css');
var navSpan = document.querySelectorAll('#nav span')
wrap.style.height = lis[0].offsetHeight + 'px';
list.style.width = lis.length + '00%';
var style = '#wrap{height: '+ lis[0].offsetHeight+'px}';
var timer = 0;
style += '#list{width: '+ lis.length +'00%}';
style += '#list li{width:'+(1/lis.length*100)+'%}';
css.innerHTML += style;
var startPoint = 0;
var startX = 0;
var now = 0;
cssTransform(list, 'translateX', 0);
auto();
wrap.addEventListener('touchstart', function(e){
clearInterval(timer);
list.style.transition = 'none';
var translateX = cssTransform(list, 'translateX');
now = Math.round(-translateX/wrap.offsetWidth);
if(now == 0){
now = navSpan.length;
}
if(now == lis.length-1){
now = navSpan.length-1;
}
cssTransform(list, 'translateX', -now*wrap.offsetWidth);
startPoint = e.changedTouches[0].pageX;
startX = cssTransform(list, 'translateX');
});
wrap.addEventListener('touchmove', function(e){
nowPoint = e.changedTouches[0].pageX;
var dis = nowPoint - startPoint;
cssTransform(list, 'translateX', startX + dis);
});
wrap.addEventListener('touchend', function(e){
var translateX = cssTransform(list, 'translateX');
now = Math.round(-translateX/wrap.offsetWidth);
tab();
auto();
});
function auto(){
clearInterval(timer);
timer = setInterval(function(){
if(now == lis.length-1){
now = navSpan.length-1;
}
list.style.transition = 'none';
cssTransform(list, 'translateX', -now*wrap.offsetWidth);
setTimeout(function(){
now++;
tab();
}, 30);
}, 2000);
}
function tab(){
list.style.transition = '.5s';
cssTransform(list, 'translateX', -now*wrap.offsetWidth);
for(var i=0;i<navSpan.length;i++){
navSpan[i].className = '';
}
navSpan[now%navSpan.length].className = 'active';
}
}
script>
head>
<body>
<div id="wrap">
<ul id="list">
<li>
<a href="#">
<img src="img/1.jpg">
a>
li>
<li>
<a href="#">
<img src="img/2.jpg">
a>
li>
<li>
<a href="#">
<img src="img/3.jpg">
a>
li>
<li>
<a href="#">
<img src="img/4.jpg">
a>
li>
<li>
<a href="#">
<img src="img/5.jpg">
a>
li>
ul>
<nav id="nav">
<span class="active">span>
<span>span>
<span>span>
<span>span>
<span>span>
nav>
div>
body>
html>
function cssTransform(el, attr, val){
if(!el.transform){
el.transform = {};
}
if(arguments.length>2){
el.transform[attr] = val;
// console.log(el.transform);
var sVal = '';
for(var s in el.transform){
switch(s){
case 'rotate':
case 'skewX':
case 'skewY':
sVal += s+'('+el.transform[s]+'deg) ';
break;
case 'translateX':
case 'translateY':
sVal += s+'('+el.transform[s]+'px) ';
break;
case 'scaleX':
case 'scaleY':
case 'scale':
sVal += s+'('+el.transform[s]+') ';
break;
}
// console.log(sVal);
el.style.WebkitTransform = el.style.transform = sVal;
}
}else{
var val = el.transform[attr];
if(typeof val == 'undefined'){
if(['scale', 'scaleX', 'scaleY'].indexOf(attr)>-1){
val = 1;
}else{
val = 0;
}
}
return val;
}
}