Question

创建一个水平连续滚动横幅，其全景背景图像为全宽div，默认方向为从右向左移动。

CSS

.banner {
    width: 100%;
    height: 800px;
    background-image: url('http://lorempixel.com/1920/800/');
    background-position: top left, center center;
    background-size: auto, cover;
 }

.moveControl {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.moveRight {
    display: block;
    width: 50%;
    height: 100%;
    float: right;
}

HTML

<div class="banner">
  <div class="moveControl">
    <div class="moveRight"></div>
  </div>
</div>

现在当:hover div moveRight上的:hover类时，它应该从<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <script> (function ($) { "use strict"; jQuery(window).load(function () { (function bgLoop() { $('.banner').animate({ 'background-position': '-=50' }, 1000, 'linear', bgLoop); }()); }); })(jQuery); </script>时的同一位置向左移动。

我使用 jQuery ：

进行了一次方向滚动

import java.util.List;
import java.util.function.Function;
import java.util.stream.Collectors;

public class Lists {
    public static <T, R> List<R> map(List<T> input, 
                   Function<? super T, ? extends R> mapper) {
        return input.stream().map(mapper).collect(Collectors.toList());
    }
}

如果在悬停时从相同的背景位置悬停，我怎样才能停止循环并开始将背景图像移动到相反的方向？这有可能吗？

这是JSFiddle

Answer 1

不确定这是否与您完全相同，但您可以尝试这样的事情：

function bgLoop(position) {
  $('.banner').stop().animate({
    'background-position': position
  }, 1000, 'linear', function() {
    bgLoop(position);
  });
}

$('.banner').hover(
  function() {
    bgLoop('+=50');
  },
  function() {
    bgLoop('-=50');
});

bgLoop('-=50');

Updated fiddle

水平背景图像滚动与方向控制在悬停

1 个答案: