使背景图像 div 环绕答案

【问题标题】：make background image div wrap around使背景图像 div 环绕
【发布时间】：2013-09-23 09:39:12
【问题描述】：

我有一个 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>

【问题讨论】：

试试这个jsfiddle.net/zTBYe/8
我已经解决了，但仍然需要一些帮助:) 我所做的是在内部 div 中使用 img 标签，而不是将图像作为 div 背景。我像往常一样滑动div。当 div 达到 10 时，我会更改内部 div 的内容，因此它有 2 个相互重叠的图像条并继续滚动。在下一个 50px 迭代中，我从 div 中删除顶部图像并重置 css“顶部”位置等等......这是另一个 jsFiddle：jsfiddle.net/ChrisJones/7xBE4/3 但是......我现在需要它在另一个方向上工作（从 10 开始计数到 1 并向上滚动而不是向下滚动 - 任何人都可以帮忙:)）

标签： jquery css html scroll slide

【解决方案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/

【讨论】：

引自问题：“数字 10 向上滚动并被图形顶部的数字 1 替换”
你说的没错。你现在不能那样做。好的方法是将每个数字切成不同的 div 并使用“背景位置”。每次点击时，您都需要更改点击的 div 的位置，并将最后一个 div 放在第一位。
这就是我认为的 mithataydogmus，为了达到我想要的效果，我可能必须分割成单独的 50x50 图形并使用 10 个 div。我只是虽然可能有一种方法可以用单条来做到这一点。

【解决方案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

【讨论】：