HTML5页面滑动问题
[英]Html5 page sliding issues
问题描述
This code below works by sliding the content of DIV but what i want is if user is on the first page and click on the links, it will slide him to second page in full and vice versa. 
下面的代码通过滑动DIV的内容来工作，但是我想要的是，如果用户在第一页上并单击链接，它将把他完整地滑到第二页，反之亦然。 Any help will be appreciated. 任何帮助将不胜感激。 Thanks 谢谢
Page Slide 页面幻灯片
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>I am on the First Page</h1>
<a href="secondpage.html" class="Left">Slide Me to Secondpage</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>I am on the second page</h1>
<a href="firstpage.html" class="Left">Slide Me back to First Page</a>
</div>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
2 2014-11-13 21:01:56
What you do is when the user wants to go to page 2 you make an Ajax call to render page 2 and place it into the div off-screen, then slide, remove the previous page (or leave it in case they go back) and add a new div on the right. 您要做的是，当用户想要转到第2页时，您将进行Ajax调用以呈现第2页，并将其放置到屏幕外的div中，然后滑动，删除上一页（或留回上一页，以防他们退回）并在右侧添加一个新的div。 The only downside to this is that since you are not creating a postback you would probably have to maintain your own history and intercept the back button. 唯一的缺点是，由于您没有创建回发，因此您可能必须维护自己的历史记录并拦截“后退”按钮。
解决方案2
0 2014-11-13 21:03:37
The problem here is your redirecting the page, your going to have to take whatever you have on the secondPage.html and basically make one long page for your webpage through css so when you click to slide to the next page, it slides instead of redirects you. 这里的问题是您重定向页面，您将不得不拿走secondPage.html上的内容，并基本上通过CSS为您的网页制作一个长页面，因此当您单击以滑动到下一页时，它会滑动而不是重定向您。
Or make a few Ajax calls as what @Christopher White is saying. 或像@Christopher White所说的那样拨打一些Ajax电话。 (saves you from making a large page that takes long load times) （避免您制作需要较长加载时间的大型页面）
Ajax could go a little something like so: Ajax可能会像这样：
$.ajax({
url: '/path/to/test2.html',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},
})
.done(function() {
console.log("success");
//Put your go to page function here ie switch to page 2
})
.fail(function() {
console.log("error");
//something went wrong, what should it do?
})
.always(function() {
console.log("complete");
//This will ALWAYS happen whether you get a failure or a success
});
Check out http://api.jquery.com/jquery.ajax/ for some prime examples and uses/explanations on ajax calls. 查看http://api.jquery.com/jquery.ajax/，了解一些主要示例，以及有关ajax调用的用法/说明。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.