另一篇 ：https://www.cnblogs.com/bndy/articles/1692164.html
index.html 中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#inp {
width: 100%;
height: 30%;
position: absolute;
left: 0;
bottom: 0;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="inp"></div>
<script src="./index.js"></script>
</body>
</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 = "<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);
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
