个人中心
gpt4 book ai didi

javascript - 背景图片的不重复属性怎么样

转载 作者：行者123 更新时间：2023-11-28 09:07:46 25 4
gpt4 key购买 nike

先决条件

  • 我有一系列大小相同的小图片，我将它们拼贴在一起。
  • 我有一个与其中一张图片大小相同的 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 毫秒一次移动一张图像。当到达图 block 中的最后一张图像时，偏移量将重置为第一张图像。

问题

通过从背景定义中删除 no-repeat 属性，并通过在相同方向上永恒移动而不重置到 最后一张图片。

  1. 这种方法的优缺点是什么？
  2. 是否有任何首选方法？

最佳答案

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

除一件事外，这种方法没有固有的优点或缺点:偏移量的大小。如果你让这个无限期地继续下去，你会慢慢开始放慢速度，因为偏移图开始变得非常大。您的数字不断增加，等待的时间越长，您不可避免地会遇到超出范围的 javascript 数字，或所谓的“Javascript 无穷大”，或超出范围的 float 。

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

如果不是出于上述原因，最好进行重置，因为它可以让您在调试时保持理智，让您在实时和事件代码中看到重置的数字，并知道这些数字是正确的。

关于javascript - 背景图片的不重复属性怎么样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26628197/

25 4 0
文章推荐： ios - 如何子类化 UICollectionViewFlowLayout 以便可以覆盖 layoutAttributesForElementsInRect
文章推荐： javascript - 如何使用 html 分割可变长度字段
文章推荐： ios - SKScene 中带有 UITapGestureRecognizer 的 Swift UIPickerView？
文章推荐： c# - 如何将数据集的内容设置为小写？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com