鼠标悬停时暂停 Jquery 脚本答案

【问题标题】：Pause Jquery script on mouseover鼠标悬停时暂停 Jquery 脚本
【发布时间】：2014-11-26 14:45:06
【问题描述】：

我将这个小代码 sn-p 用于 jquery 新闻自动收报机：

var speed = 5;
var items, scroller = $('#scroller');
var width = 0;

scroller.children().each(function(){
    width += $(this).outerWidth(true);
});

scroller.css('width', width);

scroll();

function scroll(){
    items = scroller.children();
    var scrollWidth = items.eq(0).outerWidth();
    scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
}

function changeFirst(){
    scroller.append(items.eq(0).remove()).css('left', 0);
    scroll();
}

我尝试在鼠标悬停时暂停脚本。

使用 stop() 函数，它可以工作，但每次我通过鼠标时它都会失去速度。

我知道它们与宽度/距离/速度有关，但我无法纠正。

这里是完整的脚本：http://codepen.io/anon/pen/wBayyz

谢谢。

【问题讨论】：

检查我的答案以获得仅 CSS 的解决方案。

标签： javascript jquery mouseover ticker news-ticker

【解决方案1】：

$(document).ready(function(){
  
    var speed = 5;
    var items, scroller = $('#scroller');
    var width = 0;
  
    scroller.children().each(function(){
        width += $(this).outerWidth(true);
    });
  
    scroller.css('width', width);
  
    scroll();
    
    function scroll(){
        items = scroller.children();
        var scrollWidth = items.eq(0).outerWidth();
        scroller.animate({'left' : (items.eq(0).offset().left - 39) - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
    }
  
    function changeFirst(){
        scroller.append(items.eq(0).remove()).css('left', 0);
        scroll();
    }
  $("#scroller").hover(function() {
  $(this).stop();
}, function() {scroll();});
});

#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;}

#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;}

#scrollerWrapper{width: 500px; height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Horizontal scroller</title>
</head>
<body>
  
<div id="scrollerWrapper">
  
  <ul id="scroller">

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

    <li> Maecenas sollicitudin, ante id ultrices consectetur.</li>

    <li>Cum sociis natoque penatibus et magnis dis parturient. </li>

  </ul>
  
</div>
</body>
</html>

问题是当您重新开始滚动时，您需要考虑已经滚动了多少，就像我在这里所做的那样。

这应该是你要找的，

【讨论】：

不错，但它有点破坏滚动的完成方式。
你是什么意思它破坏了滚动的完成方式？我只在 Chrome 中对其进行了测试，但它似乎以我认为应该的方式工作。
看卷轴几秒钟。它“跳跃”。我也用 Chrome。
好吧，应该修复它，看起来它启动时的偏移量是 39，而不是 0。所以我对此进行了纠正，以摆脱跳跃。
好的，谢谢。鼠标悬停后它仍然跳动。我会尝试寻找其他解决方案。

【解决方案2】：

你可以试试这个插件：http://tobia.github.io/Pause/

【讨论】：

【解决方案3】：

你真的不需要javascript。大多数当前浏览器都支持仅 CSS 动画，以完成您手头的任务。

#scroller {
  display: inline-block;
  margin:0;
  padding:0;
  line-height:30px;
  -webkit-animation: roll 10s infinite linear;
  -moz-animation: roll 10s infinite linear;
  -o-animation: roll 10s infinite linear;
  animation: roll 10s infinite linear;
}

#scroller:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes roll {
	from { -webkit-transform: translateX(100%); }
	to { -webkit-transform: translateX(-100%); }
}

@-moz-keyframes roll {
	from { -moz-transform: translateX(100%); }
	to { -moz-transform: translateX(-100%); }
}

@-o-keyframes roll {
	from { -o-transform: translateX(100%); }
	to { -o-transform: translateX(-100%); }
}

@keyframes roll {
	from { transform: translateX(100%); }
	to { transform: translateX(-100%); }
}


#scroller li {
  display: inline-block;
  height:30px;
  padding:0 0 0 10px;
  list-style-position:inside;
}

#scrollerWrapper {
  display: inline-block;
  width: 500px;
  height:30px;
  margin:30px;
  overflow:hidden;
  border:1px #333 solid;
  background:#F2F2F2;
  white-space: nowrap;
}

<html>
<head>
<title>Horizontal scroller</title>
</head>
<body>
  
<div id="scrollerWrapper">
  
  <ul id="scroller">

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

    <li> Maecenas sollicitudin, ante id ultrices consectetur.</li>

    <li>Cum sociis natoque penatibus et magnis dis parturient. </li>

  </ul>
  
</div>
</body>
</html>

【讨论】：

很好的解决方案。但我需要旧的浏览器支持。我保留此代码用于未来的项目，谢谢！