<!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请求填充错误，正在思考比较好的用户体验方式来解决，希望看官能给出好的意见~
分享到：
相关推荐
搜了好久，没有找到合适的代码，自己写了一个。android和ios下测试通过！ javascript的左右滑动代码，纯js，没有用到jquery。简单实用，直接下载html页面放到服务器上运行即可。touchstart->touchmove->touchend ...
基于Vue的页面切换左右滑动效果，具体内容如下 HTML文本页面： <div id=app> <transition name=direction mode=out-in> <!--动态获得transition 的name值--> <router class=app-view></router> </div...
WebKit加载网页的流程
Android WebKit HTML主资源加载过程
描述了WebKit的加载流程，以及各个阶段的生命周期，对web界面开发有帮助
基于WebKit浏览器引擎的动态页面数据采集方案
转webkit内核多页面浏览器，自动填表功能还没实现！请大家测试修改
qt中学习使用webview加载百度网页，简单的demo,已经跑通，基于QT5.5
demo说明：C#加载webkit作为内置浏览器，并实现了winform与html页面的相互调用。
本资源主要是实现手机浏览器的设计与实现，包括具体的过程
三.WebKit主要组成 7 II.WebKit之WebCore介绍 7 一.WebCore所包含的主要内容 7 1.目录结构 7 2.主要数据结构 9 二.一个Http请求在WebCore中的主要流程 13 1.WebKit工作流程 13 2.处理流程 15 3.代码流程 18 三.网络...
1. 这是一个基于webkit内核的浏览器。它只有简单的功能，直接调用一个html文件。 2. 使用windown sdk封装的webkit浏览器。 3. demo出自 http://blog.csdn.net/x931100537/article/details/39320149 此demo直接调用...
基于Webkit的新手级浏览器源码是一个简易web浏览器，基于安卓Webkit开发的。
然而，Android系统最新修订版已经可以支持这种功能了（尽管支持的力度还不是特别好），Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。 除了以前版本的iScroll的特性以外，iScroll 4还包括如下的特性...
java集成webkit浏览器，内附详细Demo，注意64位需要用64位swt
C#调用webkit动态加载页面，不需要IE也能打开网页
不仅着眼于系统描述WebKit 内部渲染HTML 网页的原理，并基于Chromium 的实现，阐明渲染引擎如何高效地利用硬件和最新技术，而且试图通过对原理的剖析，向读者传授实现高性能Web 前端开发所需的宝贵经验。, 《WebKit...
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用），Trident（也称MSHTML，IE 使用）和EdgeHTML（也称Chakra，Edge和其他UWP浏览器使用）。同时WebKit 也是苹果Mac OS X 系统引擎...
iScroll下拉刷新上滑加载; 使用经典插件iScroll4稍作封装，采用ajax请求数据，实现移动端列表页的...很不幸的是，这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的
WebKit2是WebKit的新的，完全不阻塞API层，它引入了一个分裂的过程模型 - web进程是孤立的UI过程中提供更好的稳定性和更好的嵌入应用程序的响应能力。 WebKit2.NET。NET绑定WebKit2。 WebKit2.NET是不是一个控件库...