欢迎光临
我们一直在努力

针对手机端触屏动作的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);
赞(0) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » 针对手机端触屏动作的js
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

上海宝山顾村棉被加工店 专业加工新旧棉被

查看详情了解一下

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏