移动端滑动框架

最新推荐文章于 2023-08-30 23:26:07 发布

weixin_30609331

最新推荐文章于 2023-08-30 23:26:07 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xingst/p/4917753.html

本文介绍了一种基于HTML5、CSS3及JavaScript实现的触摸滑动页面效果。通过监听touchstart、touchmove和touchend事件，实现了页面间的平滑过渡，并结合jQuery简化了DOM操作。同时，还介绍了如何通过简单的代码实现页面背景颜色的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="js/v.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="container">
<div id="next" class="next"></div>
<div id="music"></div>
<div id="wrap">

<div class="page" id="p0">
</div>

<div class="page" id="p1">
</div>

<div class="page" id="p2">
</div>

<div class="page" id="p3">
</div>

<div class="page" id="p4">
</div>
</div>
</div>
<audio id="mp3" src="mp3/bg.mp3" autoplay="true" loop>
</audio>
</body>
</html>

css：

@charset "utf-8";
html,body{margin:0;width:100%;height:100%;overflow:hidden;}
body{
width: 100%;
overflow: hidden;
background: #000;
}
#container{
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap{
width: 100%;
height: 100%;
}
.page{
position: relative;
float: left;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
}
#music{position:absolute; width:44px; height:44px; right:30px; top:80px; background:url(../img/music.png) no-repeat; z-index:999;}
#p0{background:#f00;}
#p1{background:#0f0;}
#p2{background:#00f;}
#p3{background:#ff0;}
#p4{background:#0ff;}
#p5{background:#f0f;}

js：

$(function(){
$(document.body).bind('touchmove', function (event) {
event.preventDefault();
});
//获取屏幕高度
var sh = window.innerHeight;
//页面高度为屏幕高度
$(".page").height(sh);
//获取page数量
var s = $(".page").length;
var ey = 0;//
var cur = 0;
var dy, ct;
var os = 50, ts = 30;//滑动超过os像素或间隔时间小于dt
//触摸事件
var mytouchele = document.getElementById("wrap");
mytouchele.addEventListener("touchstart", touchStart, false);
mytouchele.addEventListener("touchmove", touchMove, false);
mytouchele.addEventListener("touchend", touchEnd, false);
function touchStart(e){
ct = new Date().getTime();
ey = e.touches[0].pageY;
};
function touchMove(e){
e.preventDefault();
dy = e.touches[0].pageY;
if(cur == 0 && dy > ey){ return false;}
if(cur == s - 1 && -cur * sh - (ey - dy) < sh - s * sh){ return false;}
$("#wrap").css({
marginTop: -cur * sh - (ey - dy) + "px"
});
};
function touchEnd(e){
console.log(cur);
dt = new Date().getTime() - ct;
if(dy == 0){return false;}
if(dy - ey < -os || (dy - ey < 0 && dt < ts)){
dy = 0;
go_down();
return false;
}
if(dy - ey > os || (dy - ey > 0 && dt < ts)){
dy = 0;
go_up();
return false;
}
dy = 0;
slide(cur);

}
//执行滑动动画
function slide(x){
$("#wrap").animate({
marginTop: -x * sh + "px"
}, "fast");
cur = x;
bind(cur);
}
//向上滑动
function go_up(){
if(cur > 0){
slide(cur - 1);
}else{
slide(cur);
}
}
//向下滑动
function go_down(){
if(cur < s - 1){
slide(cur + 1);
}else{
slide(cur);
}

}
bind(0);
$("#music").addClass("music");
function bind(cur)
{
if(cur==0){

}else if(cur==1){

}else if(cur==2){

}else if(cur==3){

}else if(cur==4){

}else if(cur==5){

}
}
//音乐事件
var plays=document.getElementById("mp3");
$("#music").bind("touchstart",function(){
if(plays.paused){
plays.play();
$("#music").addClass("music");
}else{
plays.pause();
$("#music").removeClass("music");
}
})
});