0

我将这个小代码片段用于 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

谢谢你。

4

3 回答 3

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>

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

这应该是你要找的，

于 2014-11-26T14:56:22.663 回答
0

你真的不需要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>

于 2014-11-26T15:13:04.593 回答
0

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

于 2014-11-26T14:53:44.463 回答