webkit 的 3个div动态加载，实现切换页面的滑动
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
*{margin: 0 0;}
body{
overflow: hidden;
}
</style>
<script type="text/javascript">
(function(){
var isTouch = "ontouchend" in document;
touchStartEvent = isTouch ? "touchstart" : "mousedown";
touchStopEvent = isTouch ? "touchend" : "mouseup";
touchMoveEvent = isTouch ? "touchmove" : "mousemove";
})();
var Slide = {
emu : {
NEXT : "next",
PRE : "pre"
},
pageIndex : 0, // do not change,begin with 0
maxIndex : 7,
totalPage : 3, // do not change,3 pages switch is enough
canMove : true,
useTouch : true,
operType : null,
docWidth : document.width,
docHeight : document.height,
translateX : [],
posX : 0,
posY : 0,
init : function(width, height){
//init document
Slide.translateX = [Slide.docWidth,Slide.docWidth * 2,Slide.docWidth * 3];
$("#main").css("width", Slide.docWidth).css("height", Slide.docHeight);
$("#content").css("width", Slide.docWidth * Slide.totalPage).css("height", Slide.docHeight).css("margin-left", (-Slide.docWidth) +"px");
$("#waper_0").css("width", Slide.docWidth).css("height", Slide.docHeight).css("-webkit-transform","translate3d("+ Slide.docWidth +"px,0px,0px)");
$("#waper_1").css("width", Slide.docWidth).css("height", Slide.docHeight).css("-webkit-transform","translate3d("+ (Slide.docWidth * 2) +"px,0px,0px)");
$("#waper_2").css("width", Slide.docWidth).css("height", Slide.docHeight).css("-webkit-transform","translate3d("+ (Slide.docWidth * 3)+"px,0px,0px)");
//init action
$("#waper_0").bind('webkitTransitionEnd', function() {
if(Slide.pageIndex > 1 && Slide.operType == Slide.emu.NEXT){
var movedIndex = (Slide.pageIndex + 1) % Slide.totalPage;
Slide.translateX[movedIndex] = Slide.docWidth * (Slide.totalPage - 1);
$("#content").append($("#waper_" + movedIndex).css("-webkit-transform","translate3d("+ Slide.translateX[movedIndex] +"px,0px,0px)"));
if(Slide.pageIndex < Slide.maxIndex)
getContent(movedIndex, Slide.pageIndex + 1);
}else if(Slide.pageIndex > 0 && Slide.operType == Slide.emu.PRE){
var movedIndex = (Slide.pageIndex + 2) % Slide.totalPage;
Slide.translateX[movedIndex] = 0;
$("#content").prepend($("#waper_" + movedIndex).css("-webkit-transform","translate3d("+ Slide.translateX[movedIndex] +"px,0px,0px)"));
if(Slide.pageIndex > 0)
getContent(movedIndex, Slide.pageIndex - 1);
}
Slide.canMove = true;
});
},
next : function(){
if(Slide.pageIndex >= Slide.maxIndex)
return;
if(Slide.canMove == true){
Slide.canMove = false;
for(var i = 0; i < Slide.totalPage; i++){
Slide.translateX[i] -= Slide.docWidth;
$("#waper_" + i).css("-webkit-transform","translate3d("+ Slide.translateX[i] +"px,0px,0px)").css("-webkit-transition-duration", "1s");
Slide.operType = Slide.emu.NEXT;
}
Slide.pageIndex++;
}
},
pre : function(){
if(Slide.pageIndex <= 0)
return;
if(Slide.canMove == true){
Slide.canMove = false;
for(var i = 0; i < Slide.totalPage; i++){
Slide.translateX[i] += Slide.docWidth;
$("#waper_"+i).css("-webkit-transform","translate3d("+ Slide.translateX[i] +"px,0px,0px)");
Slide.operType = Slide.emu.PRE;
}
Slide.pageIndex--;
}
}
};
function getContent(contentId, articleId){
var url = "g:\\flod\\"+articleId+".txt";
$.get(url,function(resp) { $("#waper_"+contentId).html(resp); });
}
function getPosX(event){
if("ontouchend" in document){
return event.touches[0].pageX;
}else{
return event.pageX;
}
}
$(document).ready(function(){
Slide.init();
getContent(0, 0);
getContent(1, 1);
getContent(2, 2);
//Slide.useTouch = false;
$("#next").click(function(){
Slide.next();
});
$("#pre").click(function(){
Slide.pre();
});
$("body").bind(touchStartEvent, function(){
Slide.posX = getPosX(event);
});
$("body").bind(touchMoveEvent, function(){
if(!Slide.useTouch)
return;
if((getPosX(event) - Slide.posX) > 20 && Slide.posX != 0){
Slide.pre();
Slide.posX = 0;
}else if((getPosX(event) - Slide.posX) < -20 && Slide.posX != 0){
Slide.next();
Slide.posX = 0;
}
});
});
</script>
</head>
<body>
<div id="main" style="border:1px solid;overflow:hidden;width:300px;height:200px;">
<div id="content" style="height:200px;width:900px;position:relative;margin-left:-300px;">
<div id="waper_0" style="width:300px;height:200px;-webkit-transform: translate3d(300px,0px,0px);position:absolute;">
</div>
<div id="waper_1" style="width:300px;height:200px;-webkit-transform: translate3d(600px,0px,0px);position:absolute;">
</div>
<div id="waper_2" style="width:300px;height:200px;-webkit-transform: translate3d(900px,0px,0px);position:absolute;">
</div>
</div>
</div>
<!-- <button id="pre">pre</button><button id="next">next</button> -->
</body>
</html>注： 其中 var url = "g:\\flod\\"+articleId+".txt";是动态访问的资源，只需配置相应目录下0.txt....7.txt
有个问题没解决，就是滑动太快会使ajax请求填充错误，正在思考比较好的用户体验方式来解决，希望看官能给出好的意见~
相关推荐
echoes 2020-08-20
RainyX 2020-07-26
sunshineboyleng 2020-07-08
程序员俱乐部 2020-06-28
zhanghao 2020-06-16
e度空间 2020-06-11
sunshineboyleng 2020-06-04
bertzhang 2020-06-02
xtuhcy 2020-05-20
tichangde 2020-05-19
sunshineboyleng 2020-04-27
coulder 2020-03-07