立诚勿怠,格物致知
It's all about connecting the dots

针对手机端触屏动作的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》
文章链接:https://www.orzzone.com/%e9%92%88%e5%af%b9%e6%89%8b%e6%9c%ba%e7%ab%af%e8%a7%a6%e5%b1%8f%e5%8a%a8%e4%bd%9c%e7%9a%84js.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

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

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册