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

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

index.html 中：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#inp {

width: 100%;

height: 30%;

position: absolute;

left: 0;

bottom: 0;

background-color: antiquewhite;

}

</style>

</head>

<body>

</body>

</html>

index.js 中：

function load (){

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 = "<br>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 = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";

break;

}

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

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

js 实现上下滑动面板 touchstart touchstart touchend相关推荐

touchstart ,touchmove, touchend 页面随手指滑动
<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><s ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
js的左右滑动触屏事件
js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始 ...
纯JS实现左右滑动布局和滑动
<!DOCTYPE html> <html> <head><meta charset=utf-8><meta name=keywords cont ...
JS左侧竖向滑动菜单
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS左侧竖向滑动菜单 - w ...
js 简单的滑动教程（四）
作者:Lellansin 转载请标明出处,谢谢在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程前几篇中的代码,还存在着bug, ...
下滑加载更多js_vue.js怎么实现滑动到底部加载更多数据效果？
vue.js怎么实现滑动到底部加载更多数据效果?下面本篇文章给大家简单介绍一下vue实现滑动到底部加载更多效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 本文实例为大家分享了v ...

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

js 实现上下滑动面板 touchstart touchstart touchend相关推荐

最新文章

热门文章