webkit 的 3个div动态加载，实现切换页面的滑动

最新推荐文章于 2021-06-08 23:26:04 发布

ZHOULINGAME

最新推荐文章于 2021-06-08 23:26:04 发布

阅读量187

点赞数

分类专栏： web前端文章标签： JavaScript webkit Ajax html ViewUI

本文链接：https://blog.csdn.net/ZHOULINGAME/article/details/84379728

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<!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请求填充错误，正在思考比较好的用户体验方式来解决，希望看官能给出好的意见~

ZHOULINGAME

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录