0

我有一个 500 像素高和 50 像素宽的 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>
4

2 回答 2

0

试试这个，这对你有帮助

    $('#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

于 2013-09-18T15:06:41.467 回答
0

仅添加计数器并检查它；

 $(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/

于 2013-09-18T14:54:32.827 回答