Question

我有一个500px高和50px宽的jpg。它由10个50px x 50px正方形组成，每个正方形包含1到10的数字（图像顶部1个，底部10个）。（jpg在这里：http://i39.tinypic.com/mmq4x5.jpg）

然后我在页面上有一个50x50容器div，溢出设置为隐藏。在这里，我有一个500高x 50宽的div，包含上述图像作为背景。

每当访问者点击div时，我使用jquery animate将内部div向上滚动50个像素（从内部div的css顶部取50px。这会产生平滑滚动计数器的效果。

除了我无法找到方法之外它一切都很好，所以当达到10时我可以平滑滚动到1（IE：环绕，这样当点击10上的div时，数字10向上滚动并且被图形顶部的数字1替换为向上滚动）。我知道我可以测试顶部位置，如果它在正确的位置，只需将其重置为0px，但这将使其“跳”到1，而不是环绕。我可以反向滚动jpg的长度以向后滚动到1但这不是我想要的效果 - 我希望它看起来像一个连续的计数器，从1到10然后再到1。

这是一个jsFiddle：http://jsfiddle.net/ChrisJones/zTBYe/2/

有人可以想办法吗？

这里的参考是完整的代码：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
    #slider{
     width:50px;
     height:500px;
     background: url(numstrip.jpg) no-repeat;
     position:relative;
     top:0px;
    }
    #wrapper{
     width:50px;
     height:50px;
     position:fixed;
     overflow:hidden;
     }
</style>
</head>
<body>
Div is below
<br>
<br>
<div id="wrapper">
    <div id="slider"></div>
</div>
<script type="text/javascript">
 $(document).ready(function () {
     $('#slider').click(function () {
         topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });
 });
</script>
</body>
</html>

Answer 1

仅添加计数器并进行检查;

 $(document).ready(function () {
     var counter = 1;
     $('#slider').click(function () {
         if(counter == 10)
             topPos = 0;
         else
             topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
         counter++;
     });
 });

更新了你的小提琴，就在这里。

http://jsfiddle.net/zTBYe/3/

Answer 2

试试这个，这有助于你

    $('#slider').click(function () {
        if($(this).css("top")=='-450px')
            topPos = parseInt($(this).css("top")) + 450;
else
    topPos = parseInt($(this).css("top")) - 50;
         $(this).animate({
             'top': topPos
         }, 200);
     });

小提琴here

使背景图像div环绕

2 个答案: