我正在使用 Zurb Foundation
创建一个小型网站,我有一个带有四个链接的顶部导航栏。
单击每个链接时,我想水平滑动到每次都有不同的页面。
页面中的内容应该通过 ajax 加载,而不是在访问索引页面本身时加载所有页面。
(注意:幻灯片页面的内容不应在幻灯片动画之后加载,而应以某种方式与幻灯片本身一起加载,否则空的滑动看起来有点奇怪)
此外,由于我使用基础来获得响应式布局,所以我很困惑如何水平放置不同页面的部分。如果网站没有响应,我可能会放置其他页面并用 margin 属性分隔并滑动它们,我可以对 margin 属性进行 animate
。
但是,如何在当前页面上获得水平页面滑动效果(以及 ajax 加载)?
最佳答案
我想你想要一个“单页网站”?有很多关于此的教程,但这个很棒:
http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/
可在此处找到现场演示:
http://vandelaydesign.com/demos/single-page/
这使用 jquery 滚动到页面上具有特定 id 的元素。当您单击其中一个菜单项时,它会自动滚动/滑动到页面的该部分。
只是因为代码有点长,我将只发布 Jquery,给你一个想法。
<script type="text/javascript">
$(document).ready(function(){
$('#topnav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
$('#nav').onePageNav({
currentClass: 'current',
changeHash: false,
scrollSpeed: 750,
scrollOffset: 30,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',
begin: function() {
//I get fired when the animation is starting
},
end: function() {
//I get fired when the animation is ending
},
scrollChange: function($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
希望对您有所帮助:)
关于javascript - 滑动到网站中的不同页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17293543/