Jquery 使背景图像div环绕
我有一个jpg，高500px，宽50px。它由10个50px x 50px的正方形组成，每个正方形在图像顶部和底部分别包含一个从1到10的数字。jpg在这里： 然后我在一个页面上有一个50x50容器div，溢出设置为hidden。在这里面，我有一个500高x50宽的div，其中包含前面提到的图像作为背景 每当访问者单击div时，我都会使用jqueryanimate将内部div向上滚动50个像素，使内部div的css顶部的像素减少50px。这会产生平滑滚动计数器的效果 这一切都很好，除了我想不出一个方法，当达到10时，我可以平滑地滚动到1，即：环绕，这样当div点击10时，数字10向上滚动，并由图形顶部的数字1替换。我知道我可以测试顶部位置，如果它在正确的位置，只需将其重置为0px，但这将使其跳转到1，而不是环绕。我可以反向滚动jpg的长度，滚动回1，但这不是我想要的效果-我希望它看起来像一个连续计数器，从1到10，然后再到1 下面是一个JSFIDLE： 有谁能想出一个办法来做这件事吗 以下是完整的代码供参考：Jquery 使背景图像div环绕,jquery,css,html,scroll,slide,Jquery,Css,Html,Scroll,Slide,我有一个jpg，高500px，宽50px。它由10个50px x 50px的正方形组成，每个正方形在图像顶部和底部分别包含一个从1到10的数字。jpg在这里： 然后我在一个页面上有一个50x50容器div，溢出设置为hidden。在这里面，我有一个500高x50宽的div，其中包含前面提到的图像作为背景 每当访问者单击div时，我都会使用jqueryanimate将内部div向上滚动50个像素，使内部div的css顶部的像素减少50px。这会产生平滑滚动计数器的效果 这一切都很好，除了我想不出一
<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>
仅添加计数器并进行检查
$(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++;
});
});
试试这个，这对你有帮助
$('#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引述问题：数字10向上滚动，并由图形顶部的数字1替换，向上滚动您提到的您是对的。你现在不能这样做。好的方法是将每个数字分割为不同的div，并使用“背景位置”。在每次点击时，你需要改变点击的div的位置，并将最后一个div移到第一个。这就是我认为的mithataydogmus，为了达到我想要的效果，我可能需要将每个50x50的图形分割成10个div。我只是觉得可能有一种方法可以用单条来做。试试这个，我已经解决了，但仍然需要一些帮助。我所做的是在内部div中使用img标记，而不是将图像作为div背景。我像往常一样滑动div。当div达到10时，我会改变内部div的内容，这样它就有两个图像条彼此重叠并继续滚动。在下一次50px迭代中，我从div中移除顶部图像并重置css顶部位置，以此类推。。。下面是另一个JSFIDLE：然而。。。我现在需要这个在另一个方向上工作，从10数到1，并向上滚动而不是向下滚动-有人能帮忙吗