<!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请求填充错误，正在思考比较好的用户体验方式来解决，希望看官能给出好的意见~
分享到：
相关推荐
在触摸事件中，我们利用CSS3的`transform: translate3d()`属性来改变容器的位置，实现页面的平滑切换。例如，当需要显示第二个页面时，我们可以设置`translate3d(100%,0,0)`，将容器向左移动自身宽度的100%。 2. ...
同时，为了实现缩放效果，可以结合CSS3的`transform`属性和jQuery的`css()`方法： ```javascript var scale = 1.2; $nextImage.css({ 'transform': 'scale(' + scale + ')', '-webkit-transform': 'scale(' + ...
在本文中，我们将深入探讨如何使用jQuery和Slick幻灯片插件来创建一个游戏人物轮播切换效果，实现背景图片的动态展示，并确保该效果在主流浏览器中具有良好的兼容性。 首先，jQuery是一个广泛使用的JavaScript库，...
在本文中，我们将探讨如何使用JavaScript来实现手机Web上的图片左右滑动效果，这个功能常见于许多手机端的网页应用，尤其是图片展示类的应用。我们将主要关注以下几个方面： 1. **布局与结构**： - 图片通常被包含...
5. **交互与动画**：CSS3引入了丰富的过渡（transition）和动画（animation）效果，为商业首页增添动态元素，提高用户体验。例如，鼠标悬停时的改变颜色、下拉菜单的滑动效果等。 6. **字体与色彩**：CSS允许精细...
除了基础功能外，开发者还可以通过修改CSS样式或编写额外的JavaScript代码，对TouchSlider进行进一步的定制，如添加导航点、左右切换按钮、动态加载内容等。此外，考虑到性能优化，可以利用懒加载技术减少页面初次...
3. 动画效果：使用JavaScript实现平滑的图片切换，可能包括淡入淡出、滑动等效果。 4. 更新圆点指示器：根据当前显示的图片更新圆点的状态，显示当前选中的幻灯片。 四、浏览器兼容性 考虑到代码中使用了CSS3的盒...
本篇文章将详细解析如何通过jQuery和CSS3技术来实现这一功能。jQuery作为一个强大的JavaScript库，简化了DOM操作、事件处理和动画制作；而CSS3则提供了丰富的样式控制和动态效果，两者结合能打造出流畅且高效的360度...
Swiper.js是一款强大的JavaScript滑动特效插件，特别适合在移动设备如手机和平板电脑上使用，能够实现各种滑动效果，如触屏焦点图、Tab切换和多图切换等。下面将详细介绍如何使用Swiper.js来超简单实现轮播图。 ...
2. **页面结构和导航**：jQuery Mobile采用一种称为“动态页面”（dynamic pages）的概念，允许在一个HTML文档中包含多个页面，通过Ajax技术实现平滑的页面切换效果。 3. **主题系统**：jQuery Mobile提供了一套可...
在Android开发中，Webview是一个非常重要的组件，它允许开发者在原生应用中嵌入网页内容，实现混合式开发。本篇文章将详细讲解如何利用Webview来创建一个类似“天天动听”安卓客户端的欢迎界面，并涉及Webview与...
而结合库的轮播则能快速实现功能，但可能增加页面加载负担。 5. **优化与兼容性**：考虑到不同浏览器的兼容性和性能，我们可能需要使用`vendor prefixes`（如 `-webkit-`）来确保CSS3特性的支持，并合理使用事件...
5. **自动播放**：设置一个定时器，定时触发切换图片的函数，可以实现自动播放功能。需要注意的是，为了提供良好的用户体验，需要在用户交互时暂停自动播放。 6. **触摸事件**：对于移动设备，需要适配触摸事件，如...
Swiper插件的代码量相对较大，通常包含大量的功能和优化，但这也可能导致较大的文件大小，影响到页面的加载速度。例如，Swiper插件的3.4.0版本（未压缩版）大约有5300行JS代码。在移动设备上使用时，开发者需要格外...
【CSS3滑杆开关切换按钮特效代码】是一个利用纯CSS3技术实现的创新性交互设计，主要用于创建具有视觉吸引力和直观操作的滑动开关。在网页设计中，这样的滑杆开关常常用于用户界面中的二选一选择，如开启/关闭功能、...
总之，通过在Vue组件的生命周期钩子中调用相应的方法，并结合CSS样式和第三方库（如better-scroll），我们可以实现页面加载时滚动条自动定位到底部的效果，提供更好的用户体验。同时，这也适用于那些需要实时更新...
3. **方法**：`methods`中定义了处理滚动事件的`onScroll`方法，当用户下拉到底部时，会触发`bottomCallback`方法，该方法负责切换加载状态并调用`onPull`回调。 4. **CSS样式**：使用Scss编写了组件样式，`allow`...
这个资源集专注于div+css技术，这是一种常见的网页布局方法，通过将内容（div标签）与样式（CSS）分离，使网页设计更加灵活和易于维护。 1. **CSS广告代码特效**：这些特效通常涉及滑动广告、旋转木马、弹出窗口和...
百叶窗布局部分则由若干列表项（li）构成，每个列表项内有一个div元素，这个div元素通过CSS动画实现滑动效果。 在CSS样式方面，使用了CSS3的@keyframes规则定义了两个动画效果：fadeInOut和slideOut。fadeInOut动画...
8. **动画效果**：CSS3的过渡效果如`-webkit-transition`和`transition`用于平滑地改变元素的样式，比如在图片切换时的滑动效果。 9. **响应式设计**：在`<meta>`标签中，`viewport`属性设置为`width=device-width,...