JavaScript原生仿移动设备滑动事件

 

JavaScript原生仿移动设备滑动事件_第1张图片

 

function arrowEvent() {
	var left = document.getElementById("leftArrow");
	var right = document.getElementById("rightArrow");
	taskBox = document.getElementById("taskBox");
	nowScroll = taskBox.scrollLeft;
	left.onclick = function() {
		scrollAnimate("left",2,nowScroll);
	}
	right.onclick = function() {
		scrollAnimate("right",-2,0);
	}
}
function scrollAnimate(obj,changePX,number){
	nowNum = 0;
	clearInterval(timer);
	timer = setInterval(function() {
		// 循环一次+1
		nowNum += 1;
		// 每次更改两个像素
		taskBox.scrollLeft = nowScroll-changePX;
		// 判断是否达到要求
		if (nowNum == 100 || taskBox.scrollLeft == number) {
			clearInterval(timer);
		}
		// 更新当前滚动位置
		nowScroll = taskBox.scrollLeft;
	}, 1);
}

 

 

 

 

你可能感兴趣的:(前端)