当用户将鼠标移动到屏幕/图形上时，自动滚动将暂停。如果鼠标移动停止，自动滚动将再次恢复

你好，我有自动滚动页面的工作代码。我需要做一些修改。当用户在页面上移动鼠标并且没有鼠标移动时，需要暂停自动滚动，然后自动滚动将恢复。当用户将鼠标移动到屏幕/图形上时，自动滚动将暂停。如果鼠标移动停止，自动滚动将再次恢复

 <script> 
    $("html, body").animate({ scrollTop: $(document).height() }, 400000); 
     setTimeout(function() { 
      $('html, body').animate({scrollTop:0}, 400000); 
     },400000); 
     setInterval(function(){ 
      // it will take 40 secound in total from the top of the page to the bottom 
     $("html, body").animate({ scrollTop: $(document).height() }, 400000); 
     setTimeout(function() { 
      $('html, body').animate({scrollTop:0}, 400000); 
     },400000); 

     },8000); 
    </script>

来源

2016-04-28 Tejas Masurkar

请更新html或给我们一个FIDDLE以获得适当的帮助.. – Sarath

http://stackoverflow.com/questions/5088766/the-way-to-stop-and-continue-animation-while-mouseover-and -mouseout-in-jquery –

@Sarath http://jsfiddle.net/QUCWe/1605/ –

希望这是你在寻找什么

var x = 10, 
    y = true, 
    z = 1, 
    maxscroll = 40, 
    mixscroll = 10; 

setInterval(function() { 
    $('html, body').mousemove(function() { 
     z = 0; 
    }); 
    if (z === 0) { 
     setTimeout(function() { 
      z = x; 
     }, 1000); 
    } else { 
     z = x; 
     if (y) { 
      $('html, body').animate({ scrollTop: ($(window).scrollTop() + z) + 'px' }, 300); 
      x++; 
     } else { 
      $('html, body').animate({ scrollTop: ($(window).scrollTop() + -(z)) + 'px' }, 300); 
      x--; 
     } 
    } 

    if (maxscroll < x && y) { 
     y = false; 
    } else if (x < mixscroll) { 
     y = true; 
    } 
}, 500);

https://jsfiddle.net/donS/9xdz86yu/

来源

2016-04-28 07:28:22 user6250141

就是这样。但是，在达到谷底后，你的网页不会再上涨。检查此jsfiddle.net/QUCWe/1605 –

我没有花钱，使其完美只是概念，请检查更新希望这个帮助 – user6250141

你可以在jQuery的像使用.stop()功能..

$("html, body").mouseover(function(){ 
      $(this).stop(); 
});

试试这个FIDDLE

来源

2016-04-28 09:35:52 Sarath

当用户将鼠标移动到屏幕/图形上时，自动滚动将暂停。如果鼠标移动停止，自动滚动将再次恢复

回答

相关问题