Javascript 背景图像上的“不重复”属性如何 前提条件 我有一系列大小相等的小图片，我把它们贴在一起 我有一个与其中一张图片大小的div 我使用setInterval通过图像宽度偏移背景来循环生成动画 实例 #动画{ 宽度：100px； 高度：100px； 溢出：隐藏； 背景：url（'tile.jpg'）不重复0px 0px； 边框：10px纯红； } 图像的var nr_=10； var图像_宽度=100； var first_位置='0px'； var last_position=（（1-nr_图像）*图像宽度）+px'； 函数设置一帧动画（）{ if（jQuery（'#animation'）.css（'background-position'）.split（''）[0]==最后一个位置）{ jQuery（'#animation'）.css（'background-position'，first_position+'0px'）； }否则{ jQuery（'#animation'）.css（'background-position'，'-='+图像宽度+'0px'）； } } jQuery（文档）.ready（函数（）{ setInterval（'animat_one_frame（）'，200）； });
因此，在上面的示例中，背景将每200ms一次移动一个图像。当到达平铺中的最后一个图像时，偏移将重置为第一个图像 问题 通过从背景定义中删除无重复属性，并在同一方向上永久移动，而不重置为最后一幅图像的偏移量，可以实现与上述示例中相同的视觉效果Javascript 背景图像上的“不重复”属性如何 前提条件 我有一系列大小相等的小图片，我把它们贴在一起 我有一个与其中一张图片大小的div 我使用setInterval通过图像宽度偏移背景来循环生成动画 实例 #动画{ 宽度：100px； 高度：100px； 溢出：隐藏； 背景：url（'tile.jpg'）不重复0px 0px； 边框：10px纯红； } 图像的var nr_=10； var图像_宽度=100； var first_位置='0px'； var last_position=（（1-nr_图像）*图像宽度）+px'； 函数设置一帧动画（）{ if（jQuery（'#animation'）.css（'background-position'）.split（''）[0]==最后一个位置）{ jQuery（'#animation'）.css（'background-position'，first_position+'0px'）； }否则{ jQuery（'#animation'）.css（'background-position'，'-='+图像宽度+'0px'）； } } jQuery（文档）.ready（函数（）{ setInterval（'animat_one_frame（）'，200）； });,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，在上面的示例中，背景将每200ms一次移动一个图像。当到达平铺中的最后一个图像时，偏移将重置为第一个图像 问题 通过从背景定义中删除无重复属性，并在同一方向上永久移动，而不重置为最后一幅图像的偏移量，可以实现与上述示例中相同的视觉效果 这种方法的优缺点是什么？ 有哪种方法是首选的？ 1。这种方法的优缺点是什么？ 这种方法没有固有的优点或缺点，除了一点：偏移量的大小。如果无限期地继续此操作，则会慢慢开始减速，因为偏移图形开始变得非常大。您的数字一直在增加，等待的时间越长，您不可避免地会将它撞
1。这种方法的优缺点是什么？ 这种方法没有固有的优点或缺点，除了一点：偏移量的大小。如果无限期地继续此操作，则会慢慢开始减速，因为偏移图形开始变得非常大。您的数字一直在增加，等待的时间越长，您不可避免地会将它撞到一个超出范围的javascript数字，或所谓的“javascript无穷大”，或超出范围的浮点 2。有哪种方法是首选的？
如果不是因为上述原因，最好是重置，然后只是因为它允许您在调试中保持理智，允许您在实时和活动代码中看到数字重置，并知道这些数字是正确的。我想说，使用重复的背景可以使整个过程简单得多，因为您可以在一行代码中完成—一行
setInterval（）animate（）<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#animation{
width: 100px;
height: 100px;
overflow: hidden;
background: url('tile.jpg') no-repeat 0px 0px;
border: 10px solid red;
}
</style>
<script>
var nr_of_images = 10;
var image_width = 100;
var first_position = '0px';
var last_position = ((1-nr_of_images)*image_width)+'px';
function animate_one_frame(){
if(jQuery('#animation').css('background-position').split(' ')[0] == last_position){
jQuery('#animation').css('background-position', first_position + ' 0px');
}else{
jQuery('#animation').css('background-position', '-=' + image_width + ' 0px');
}
}
jQuery(document).ready(function() {
setInterval('animat_one_frame()', 200);
});
</script>
</head>
<body>
<div id="animation">
</div>
</body>
</html>