移动端事件对象-touches/targetTouches/changedTouches

责编:menVScode 2018-01-10 23:05 阅读(537)

        当给某个元素加上了事件绑定函数之后,事件函数默认的第一个参数就是事件对象。

        事件对象:当用户在浏览器下触发了某个行为,事件对象会记录用户操作时一些细节信息。

        touches:当前位于*屏幕*上的所有手指的一个列表

        targetTouches:位于当前DOM元素上的手指的一个列表

        changedTouches:涉及当前事件的手指的一个列表

移动端无缝轮播demo

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<title>Document</title>
<script type="text/javascript">
	//获取html
	var html = document.documentElement;
	//设置html的字体大小 = 可视区的宽度 / 15
	html.style.fontSize = html.clientWidth / 15 + 'px';
	//阻止pc和浏览器默认行为。
	document.addEventListener('touchstart',function(ev){
		ev.preventDefault();
	});
</script>
<style>
body{ margin: 0; }
.wrap{ height: 4.68rem; position: relative; }
.list{ padding: 0; margin: 0; width:400%; position: absolute; top:0; left:0; list-style: none; }
.list li{ float: left; width:15rem; }
.list img{ width:15rem; display: block; }
nav{ width:15rem; height: 10px; position: absolute; bottom:5px; z-index: 1; text-align:center; }
nav a{ width:15px; height: 15px; display: inline-block; background: red; border-radius:50%; vertical-align:top; }
nav a.active{ background:#fff; }
</style>
</head>
<body>
    <section class="wrap">
        <ul class="list">
            <li> <img src="img/img.jpg" alt="" /> </li>
            <li> <img src="img/img2.jpg" alt="" /> </li>
            <li> <img src="img/img3.jpg" alt="" /> </li>
            <li> <img src="img/img4.jpg" alt="" /> </li>
        </ul>
        <nav>
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </nav>
    </section>
<script type="text/javascript">
	var wrap = document.querySelector('.wrap'),
		list = document.querySelector('.list'),
		a = document.querySelectorAll('a'),
		disX = 0,//按下的坐标
		listL = 0,//当前按下list的left值
		w = wrap.clientWidth,//一张图片的宽度
		len = 0,
		n = 0; //默认第一个小点为白色
	
	list.innerHTML += list.innerHTML;
	len = list.children.length;
	list.style.width = w * len + 'px';
	
	list.addEventListener('touchstart',start);
	list.addEventListener('touchmove',move);
	list.addEventListener('touchend',end);
	function start(ev){
		var e = ev.changedTouches[0];
		disX = e.pageX;
		list.style.transition = 'none';
		/*
			在按下的时候,要知道当前点击的是第几张图片
			如果是第一张快速拉到第5张的位置上。
		*/
		var num = Math.round(list.offsetLeft / w);
		if(num == 0){
			num = a.length;
			list.style.left = -num * w + 'px';
		}
		
		if(-num == len-1){
			num = a.length-1;
			list.style.left = -num * w + 'px';
		}
		
		listL = this.offsetLeft;
	}
	function move(ev){
		var e = ev.changedTouches[0];
		list.style.left = (e.pageX - disX) + listL + 'px';
	}
	function end(){
		var num = Math.round(list.offsetLeft / w);
		list.style.transition = '.5s';
		list.style.left = num * w + 'px';
		
		//console.log(-num)
		a[n].className = '';
		a[-num%a.length].className = 'active';
		n = -num%a.length;
	}		
</script>
</body>
</html>
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码