js 实现上下滑动面板 touchstart touchstart touchend

另一篇 ：https://www.cnblogs.com/bndy/articles/1692164.html

 

index.html 中：

    

    

    

    

    

    

    

 

index.js 中：

function load (){  

   

    document.addEventListener('touchstart',touch, false);  

    document.addEventListener('touchstart',touch, false);  

    document.addEventListener('touchend',touch, false);  

       

    function touch (event){  

        var event = event || window.event;  

           

        var oInp = document.getElementById("inp");  

   

        switch(event.type){  

            case "touchstart":  

                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  

                // oInp.style.cssText="height: event.touches[0].clientY;"

                break;  

            case "touchend":  

                oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  

                console.log(event.changedTouches[0].clientY,1111);

                // if(event.changedTouches[0].clientY > 440) {

                //     oInp.style.cssText="height: 30%;"

                // } else if(event.changedTouches[0].clientY > 220){

                //     oInp.style.cssText="height: 60%;"

                // } else if(event.changedTouches[0].clientY < 220){

                //     oInp.style.cssText="height: 90%;"

                // }

                console.log(window.screen.availHeight*0.33,3333333333);

 

                if(event.changedTouches[0].clientY > (window.screen.availHeight*0.66)) {

                    oInp.style.cssText="height: 30%;"

                } else if(event.changedTouches[0].clientY > (window.screen.availHeight*0.33)){

                    oInp.style.cssText="height: 60%;"

                } else if(event.changedTouches[0].clientY < (window.screen.availHeight*0.33)){

                    oInp.style.cssText="height: 90%;"

                }

 

                break;  

            case "touchmove":  

                event.preventDefault();  

                oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  

                break;  

        }  

           

    }  

}  

window.addEventListener('load',load, false);  

 

console.log('屏幕高度：',window.screen.availHeight);