Question

我们需要创建一个屏幕保护程序，图像应该一次又一次地向左翻转。我们编码如下所示。

＆＃13;

class ExcelReader
 {
 public List<TestCaseData> ReadExcelData(string excelFile, string sheetname)
 {
    string cmdText = "SELECT * FROM [" + sheetname+ "$]";

    if (!File.Exists(excelFile))
        throw new Exception(string.Format("File name: {0}", excelFile), new 
    FileNotFoundException());

    string connectionStr = 
     string.Format("Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties=\"Excel 12.0 Xml;HDR=YES\";", excelFile);
    var ret = new List<TestCaseData>();
    using (var connection = new OleDbConnection(connectionStr))
    {
        connection.Open();
        var command = new OleDbCommand(cmdText, connection);
        var reader = command.ExecuteReader();
        if (reader == null)
            throw new Exception(string.Format("No data return from file, 
        file name:{0}", excelFile));
        while (reader.Read())
        {
            var row = new List<string>();
            var feildCnt = reader.FieldCount;
            for (var i = 0; i < feildCnt; i++)
                row.Add(reader.GetValue(i).ToString());
            ret.Add(new TestCaseData(row.ToArray()));
        }
    }
    return ret;
}

＆＃13;

图像按预期一次又一次地滚动，但每隔2秒，我们就会出现闪烁效果。请在此处查看演示。

As a fiddle

任何人都可以帮我解决这个问题，或者有什么方法可以实现使用javascript连续滚动一个图像的效果？

我尝试使用javascript，如下所示。

      [TestFixture]
class TC_1
{

  public static IEnumerable<TestCaseData> BudgetData
    {
        get
        {
            List<TestCaseData> testCaseDataList = new ExcelReader().ReadExcelData(//path//document.xlsx",
                "SheetName");
            if (testCaseDataList != null)
                foreach (TestCaseData testCaseData in testCaseDataList)
                    yield return testCaseData;
        }
    }


    [Test]     
    [TestCaseSource(typeof(TC_1), "BudgetData")]
    public void TestCase1(string attribbutte1, string .....)
    {
     ........................................

但这只是将图像向右移动。图像没有滚动。

Answer 1

你可以使用很长的动画时间和重复背景来产生效果。

*此动画播放超过10天（可能会闪烁一次），但如果您愿意，可以将其播放更长时间。

*当然，您可以random()或javascript之类的setInterval执行相同的操作（修改样式）。并且具有真正的无限持续时间（至少在达到数字限制之前）。

＆＃13;

.canvas{
  width: 300px;
  height: 100px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/33/Jordansallotments.jpg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  
  animation: move-background 1000000s linear infinite;
}

@keyframes move-background {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -20000000px 0;
  }
}

＆＃13;

<div class="canvas"></div>

＆＃13;

Answer 2

background-position: xxx%中的百分比值是相对于元素的大小而不是实际图像的大小。

因此，如果您想保留原始background-image-size，则必须根据媒体的大小设置此background-position：

.animator {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/33/Jordansallotments.jpg);
  background-position: 0% 50%;
  animation: move-background 2s linear infinite;
  width: 100vw;
  height: 100vh;
}

@keyframes move-background {
  to {
    /* the image is 1225*800px */
    background-position: -1225px 50%;
  }
}

<div class="animator"></div>

还要注意，当你这样做时

background-position: 100%, 0%;

您实际上设置了两个背景位置规则，只有在您设置了两个背景图像规则时才会使用这些规则，并且确实是以下方面的简写：

background-position-x: 100%, 0%;
background-position-y: 100%, 0%;

如何在javascript中一次又一次地实现一个图像的翻转效果？

2 个答案: