当我的页面被更改时,我希望能将整个页面向下滑动。我考虑的方法是创建一个垂直幻灯片,当链接被点击或页面加载时播放。到目前为止,我只能创建一个影响特定DIV的滑块。我还希望它能垂直滑动。非常感谢您的任何想法!
只需将所有内容包装在一个 div 中,然后将其向下滑动。
CSS
#bodyContent {
display:none;
height: 100%;
}
HTML
<div id="bodyContent">
//all your stuff goes in here
</div>
Javascript / JQuery
$(document).ready(function(){
$('#bodyContent').slideDown();
});
看看jQuery Mobile的多页面模板。它的作用是将您的页面分成同一HTML文件中的多个DIV包装器。使用滑动转换时,您不希望它们因网络问题而显得尴尬或“挂起”,因此一般的想法是浏览器下载页面上的所有内容,并仅显示DOM的相关部分。
<div data-role="page" id="one">
<!-- page 1 content -->
<!-- Link to Page 2 -->
<p><a href="#two" data-role="button">Show page "two"</a></p>
</div>
<div data-role="page" id="two">
<!-- page 2 content -->
<!-- Link back to Page 1 -->
<p><a href="#one" data-direction="reverse"
data-role="button" data-theme="b">Back to page "one"</a></p>
</div>
一旦用户转到另一页,您只需使用JavaScript和CSS来操作页面的样式,以隐藏第一页并显示第二页。
此外,上面的示例使用了淡出效果,因此您还需要查看页面转换页面,以将其更改为使用向下滑动效果。
<a href="page-transitions-page.html" data-role="button" data-transition="slidedown"
data-inline="true" data-corners="true" data-shadow="true"
data-iconshadow="true"
data-wrapperels="span" data-theme="c"
class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">page</span>
</span>
</a>
我觉得这很有趣,尝试了一下。
既然其他人都可以以每秒50000个单词的速度打字,那么将内容包装在div中的答案类似于这个答案 :)
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Slide Test</title>
</head>
<body>
<div class="container">
<a href="test.html" class="slide_page">Link Text</a>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
// hide the div on page load and use a slidedown effect
$('div.container').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.container').slideUp(500, function(){
window.location = $href;
});
});
});
</script>
</html>