前端开发者前端 移动端开发|移动端前端开发常见问题|h5前端开发移动端
html 代码片段
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”
/>
<title>移动端web前端开发：上下翻页效果</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
html,
body{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
.con{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.red,
.blue,
.black,
.yellow{
width:100%;
height:100%;
font-size:32px;
}
.red{
background:red;
}
.blue{
background:blue;
}
.black{
background:black;
}
.yellow{
background:yellow;
}
</style>
</head>
<body>
<divclass=”con” id=”con”>
<divclass=”red”>ONE</div>
<divclass=”blue”>TWO</div>
<divclass=”black”>THREE</div>
<divclass=”yellow”>FOUR</div>
</div>
<script type=”text/javascript”>
varcon=document.getElementById(‘con’);
varstartY,moveY,endY,orginTop,lastY;
con.addEventListener(‘touchstart’,function(event){
event.preventDefault();
startY= event.targetTouches[0].pageY;
orginTop=parseFloat(getComputedStyle(this,null).top);
},false);
con.addEventListener(‘touchmove’,function(event){
event.preventDefault();
this.style.top =orginTop+ event.targetTouches[0].pageY -startY+”px”;
endY= event.targetTouches[0].pageY -startY;
},false);
con.addEventListener(‘touchend’,function(event){
event.preventDefault();
vara=parseFloat(getComputedStyle(this,null).top) % document.body.offsetHeight;
if (Math.abs(a) < document.body.offsetHeight/2) {
lastY=parseFloat(getComputedStyle(this,null).top) -a;
}else{
lastY=parseFloat(getComputedStyle(this,null).top) – document.body.offsetHeight-a;
}
if (parseFloat(getComputedStyle(this,null).top) >0) {
lastY=0;
}elseif (parseFloat(getComputedStyle(this,null).top) <-3* document.body.offsetHeight) {
lastY=-3* document.body.offsetHeight;
}
$(this).animate({
top: lastY
},300);
},false);
</script>
</body>
</html>
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册