Question

这里我放了一个代码来自动上下滚动图像但我需要减慢速度并暂停滚动鼠标悬停。请帮我解决我的问题。样式标签用于样式背景和内部图像

调用背景图像和内部图像：

          <img src="images/webdesign/pixo-mob.png" alt="">  
    </figure>
  </div>
</div>
</div>
<script>
  $(function () {
    var $image = $('#image-autoscroll').children('img');
    function animate_img() {
      if ($image.css('top') == '0px') {
      $image.animate({top: -($image.height()-485)+"px"}, $image.height()*5,     function () {
        animate_img();
      });
     } else {
       $image.animate({top: '0px'}, $image.height()*5, function () {
         animate_img();
       });
     }
   }
   animate_img();
  });
</script>


<style>
  .phone-style .phone {
    background: url(../images/webdesign/phone.png) no-repeat;
    max-width: 283px;
    width: 100%;
    background-size: 100%;
    height: 471px;
    margin: 0 auto;
    overflow: hidden;
    padding: 84px 41px 99px 32px;
  }

  .phone-style .macbook, .phone-style .phone, .phone-style .tablt {
    z-index: 9999;
    cursor: not-allowed;
    box-sizing: border-box;
  }

  .phone-style .device {
    width: 100%;
    height: 100%;
  }

  .phone-style #filter, .phone-style .device {
    display: block;
    overflow: hidden;
  }

  #image-autoscroll > img {
    position : relative;
  }

Answer 1

我发现了可以暂停它的东西，但是它无限下降，一旦暂停，它就不会再开始运行。

    var yPos = 0;
var pic = $('#i');
var m = setInterval(function() {
    $('#i').css({
        'position': 'absolute',
        'top': yPos
    })
    yPos++;
  pic.mouseover(function() {
    clearInterval(m)
})
pic.mouseleave(function() {
    setInterval($('#i').css({
        'position': 'absolute',
        'top': yPos
    })
    yPos+=0.5;, 75)
})
}, 75)

与

<p id="i">Hello Weaver!</p>

<!-- End your code here -->
</body>

用于html

如何暂停鼠标滚动

1 个答案: