针对手机端触屏动作的js

Written by myself and copied here for future reference.


var startX, startY, ingX, ingY, endX, endY, distance, pathX, pathY, tempX, tempY, pageIndex;
pageIndex = 0;
function load (){
    document.addEventListener('touchstart',touch, false);
    document.addEventListener('touchmove',touch, false);
    document.addEventListener('touchend',touch, false);
    function touch (event){
        var event = event || window.event;
        switch(event.type){
            case "touchstart":
                startX = event.touches[0].pageX;
                startY = event.touches[0].pageY;
                break;
            case "touchend":
                endX = event.changedTouches[0].pageX;
                endY = event.changedTouches[0].pageY;
                pathX = endX - startX;
                pathY = endY - startY;
                distance = Math.sqrt(pathX*pathX + pathY*pathY);
                if (distance >= 100 && pathY < 0) {
                    console.log('distance is more than 30!');
                    switch(pageIndex){
                    	case 0:
                    		console.log('test1');
	                        //$('#header').hide();
	                        alert('Corresponding resources are loading, please wait for a moment++++++  !')
	                        pageIndex = 1;
	                        break;
                    	case 1:
                    		console.log('test2');
	                        $('body').animate({
	                        	scrollTop: pageHeight * 2 + 'px'
	                        }, 300);
	                        pageIndex = 2;
	                        break;
                    	case 2:
                    		console.log('test3');
                    		//$('#footer').show();
	                        pageIndex = 2;
	                        break;
                    }
                };
                if (distance >= 100 && pathY > 0) {
                    console.log('distance is more than 30!');
                    switch(pageIndex){
                    	case 0:
                    		console.log('test1');
                    		alert('Page is loading, please wait for a moment!');
	                        pageIndex = 0;
	                        break;
                    	case 1:
                    		console.log('test2');
	                        //$('#header').show();
	                        pageIndex = 1;
	                        break;
                    	case 2:
                    		console.log('test3');
                    		//$('#footer').hide();
	                        $('body').animate({
	                        	scrollTop: pageHeight * 0 + 'px'
	                        }, 300);
	                        pageIndex = 1;
	                        break;
                    }
                };
                break;
            case "touchmove":
                event.preventDefault();
                ingX = event.touches[0].pageX;
                ingY = event.touches[0].pageY;
                console.log(ingX, ingY);
                tempX = ingX - startX;
                tempY = ingY - startY;
/*
                $('#page2').css({
                	transform: 'scale(' + (1+tempX/100) + ', ' + (1+tempY/100) + ')'
                });
*/
                break;
        }
    }
}
window.addEventListener('load',load, false);
Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据