gpt4 book ai didi

javascript - 为什么 jQuery scrollTo() 不起作用?

转载 作者:行者123 更新时间:2023-11-30 13:29:34 27 4
gpt4 key购买 nike

我正在尝试使用一个非常简单的 scrollTo 插件实现:

http://jsfiddle.net/TPQyY/

但我无法让它工作。知道为什么它不水平滚动以显示列表中的下一张图片吗?

<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

$('.next').click(function(e) {
$('ul#scrollThis').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );
e.preventDefault();
});

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; width: 50px; height: 50px; overflow: hidden; }
ul li { float: left; }

</style>

<ul id="scrollThis">
<li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
<li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
<li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
</ul>

<a href="" class="next">Next >></a>

最佳答案

问题是您分配给 ul 的宽度。只容纳一个li就足够了。因此,即使您已将 float:left 设置为它们,其余的 li 也会结束。

您需要在 ul 周围设置一个包装器 div,它应该具有要显示的单个 li 项目所需的高度和宽度。 ul 的宽度应该是所有 li 的总宽度。执行此操作后,在包装器 div 上应用 scrollTo 插件。

工作 demo

关于javascript - 为什么 jQuery scrollTo() 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7294457/

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