Question

前提条件

我有一系列相同大小的小图像，我彼此相邻。
我有一个像其中一个图像大小的div。
我使用setInterval循环遍历图像，通过按图像宽度偏移背景来生成动画。

实施例

<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>

因此，在上面的示例中，背景将每200毫秒一次移位一个图像。当到达图块中的最后一个图像时，偏移将重置为第一个图像。

问题

可以通过从背景定义中移除无重复属性并在同一方向上移动永恒而不重置为最后一个图像。

这种方法的优点和缺点是什么？
是否有首选方法？

Answer 1

<强> 1。这种方法的优点和缺点是什么？

这种方法没有固有的优点或缺点，除了一件事：偏移的大小。如果你无限期地继续这样做，你会慢慢开始放慢速度，因为偏移绘图开始变得非常大。你的号码不断增加，你等待的时间越长，就越不可避免地将其提升到超出范围的javascript号码，或者所谓的“Javascript无限”，或超出范围的浮点数。

<强> 2。是否有任何方法？

如果不是出于上述原因，最好重置，然后只是因为它允许你在调试中自己的理智，允许你看到你的实时和活动代码中的数字重置，并知道数字是正确的。

背景图像上的无重复属性怎么样？

前提条件

实施例

问题

1 个答案: