使背景图像div环绕

Question

I have a jpg that is 500px high and 50px wide. 我有一个500像素高和50像素宽的jpg。 It consists of 10 50px x 50px squares each containing a number from 1 to 10 (1 at top of image and 10 at bottom). 它由10个50px x 50px的正方形组成，每个正方形包含1到10的数字（图像顶部为1，底部为10）。 (The jpg is here : http://i39.tinypic.com/mmq4x5.jpg ) （jpg在这里： http : //i39.tinypic.com/mmq4x5.jpg ）

I then have a 50x50 container div on a page with overflow set to hidden. 然后，我在页面上有一个50x50容器div，溢出设置为隐藏。 Inside this I have a 500 high x 50 wide div that contains the aforementioned image as a background. 在其中，我有一个500高x 50宽div，其中包含上述图像作为背景。

Whenever the visitor clicks on the div, I am scrolling the inner div up by 50 pixels using jquery animate (taking 50px off the css top for the inner div. This gives the effect of a smooth scrolling counter. 每当访客单击div时，我都会使用jquery animate将内部div向上滚动50个像素（将内部div的css顶部减掉50像素。这提供了平滑滚动计数器的效果。

It all works great apart from I can't figure out a way so that when 10 is reached I can smooth scroll to 1 (IE: Wrap around so that when the div is clicked on 10, the number 10 scrolls up and is replaced by the number 1 from the top of the graphic scrolling up). 一切都很好，除了我无法找出一种方法，以便在达到10时我可以平滑滚动到1（即：环绕，以便当div单击10时，数字10会向上滚动并替换为从图形顶部向上滚动的数字1）。 I know I can test the top position and if it is in the correct place just reset it to 0px but that will make it "jump" to 1, not wrap around. 我知道我可以测试顶部位置，如果它在正确的位置，只需将其重置为0px即可，但这会使它“跳转”为1，而不是环绕。 I could scroll the length of the jpg in reverse to scroll BACK to 1 but thats not the effect I want - I want it to look like a continous counter that goes from 1 to 10 and then to 1 again. 我可以反向滚动jpg的长度以将BACK滚动回1，但这并不是我想要的效果-我希望它看起来像一个连续的计数器，从1到10再到1。

Here is a jsFiddle for it : http://jsfiddle.net/ChrisJones/zTBYe/2/ 这是一个jsFiddle： http : //jsfiddle.net/ChrisJones/zTBYe/2/

Can anyone think of a way to do this please ??? 任何人都可以想办法做到这一点吗？

For reference here is the complete code : 供参考的是完整的代码：

<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

Added only counter and checked it; 仅添加了计数器并进行了检查；

 $(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++;
     });
 });

Updated your fiddle, here it is. 更新了您的小提琴，就在这里。

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

Answer 2

Try this, this is help you 试试这个，这对您有帮助

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

Fiddle here here摆弄

使背景图像div环绕

问题描述

2 个解决方案

解决方案1
0 2013-09-18 14:54:32

解决方案2
0 2013-09-18 15:06:41

使背景图像div环绕

问题描述

2 个解决方案

解决方案1 0 2013-09-18 14:54:32

解决方案2 0 2013-09-18 15:06:41

解决方案1
0 2013-09-18 14:54:32

解决方案2
0 2013-09-18 15:06:41