gpt4 book ai didi

javascript - Html5页面滑动问题

转载 作者:行者123 更新时间:2023-12-02 16:48:12 25 4
gpt4 key购买 nike

下面的代码通过滑动 DIV 的内容来工作,但我想要的是,如果用户位于第一页并单击链接,它将把他完整地滑动到第二页,反之亦然。任何帮助将不胜感激。谢谢

页面幻灯片

<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 页时,你进行 Ajax 调用来渲染第 2 页,并将其放入屏幕外的 div 中,然后滑动,删除上一页(或者保留它,以防他们离开)返回)并在右侧添加一个新的 div。唯一的缺点是,由于您没有创建回发,您可能必须维护自己的历史记录并拦截后退按钮。

关于javascript - Html5页面滑动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26918212/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com