我正在寻找一种方法来做水平文本滚动只滚动文本长度比容器DIV长。任何建议如何做到这一点?长度检测水平文本滚动javascript/jquery
1
A
回答
0
试试这个:
CSS
.container { width: 600px; background: #ccc; }
.ticker { white-space: nowrap; }
HTML
<div class="container">
<span class="ticker">Some short text that isn't greater than the browser window</span>
<span class="ticker">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis metus quis augue facilisis elementum. Pellentesque aliquet congue tristique. Phasellus feugiat cursus lobortis. Cras et massa odio, et vehicula nisi. Donec adipiscing condimentum diam sed hendrerit. Curabitur eros elit, aliquet et aliquam id, facilisis id nisi. Vivamus dictum commodo libero, eu venenatis nulla sodales in. Maecenas rhoncus, dui at sollicitudin scelerisque, neque lectus viverra metus, vel elementum nisl ante quis mi. Cras sagittis enim ac arcu scelerisque tristique vel in dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vehicula leo vel lacus blandit ut adipiscing lorem sodales.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis metus quis augue facilisis elementum. Pellentesque aliquet congue tristique. Phasellus feugiat cursus lobortis. Cras et massa odio, et vehicula nisi. Donec adipiscing condimentum diam sed hendrerit. Curabitur eros elit, aliquet et aliquam id, facilisis id nisi. Vivamus dictum commodo libero, eu venenatis nulla sodales in. Maecenas rhoncus, dui at sollicitudin scelerisque, neque lectus viverra metus, vel elementum nisl ante quis mi. Cras sagittis enim ac arcu scelerisque tristique vel in dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vehicula leo vel lacus blandit ut adipiscing lorem sodales. Vestibulum ultricies elementum mattis. Maecenas sit amet turpis magna. Phasellus posuere mi nec nisi sodales non dapibus nibh faucibus. Vestibulum leo tellus, blandit sed auctor id, faucibus quis sem. Sed at purus quam. Praesent eget ante sem, a scelerisque nulla. Praesent id quam sit amet eros viverra euismod. Integer volutpat vulputate aliquam. Aliquam convallis dolor tellus, in cursus justo. Donec molestie consequat dolor. Nunc imperdiet arcu et justo vehicula mollis. Suspendisse id molestie velit. Morbi sed est arcu, non aliquam augue.</span>
</div>
脚本
$(document).ready(function(){
var tickerWidth = '100%'; // add '%' or 'px' to this variable
var tickerSpeed = 10; // 0 = stopped, 30 = almost too fast
var tickerDelay = 0; // delay in ms
var tickerDirection = 'left'; // options = left, right (up & down work as well, but not the way you want)
var tickerMouseoverPause = true;
var tickerLoopTimes = 0; // 0 = infinite # of loops
$('.ticker').each(function(){
if ($(this).width() > $(this).parent().width()) {
var marq = $('<marquee></marquee>').attr({
'behavior' : 'scroll',
'scrollamount' : tickerSpeed,
'direction' : tickerDirection,
'width' : tickerWidth
})
if (tickerLoopTimes != 0) {
marq.attr('loop', tickerLoopTimes)
}
if (tickerMouseoverPause) {
marq.attr({
'onmouseover' : 'this.stop()',
'onmouseout' : 'this.start()'
})
}
$(this).wrap(marq);
}
})
})
这个脚本基本上包装了一个<marquee>
文本,得到它的属性的更多信息请查看this site。
注意我尝试使用不显眼的jQuery为此,在选取框上使用hover
,但它不起作用。但添加内联mouseover
和mouseout
事件到标签工作得很好。
0
这里是一个很好的一个
+0
它是否也可以自动滚动,就像CNN上的“股票行情”一样? – 2009-09-02 05:48:05
+0
只是简单的事情..不需要有吨的JS代码或重型插件 – 2009-09-02 05:50:14
相关问题
- 1. 水平检测滚动uitableviewCell
- 2. Libgdx检测水平滚动
- 3. JavaFX的 - 根据滚动窗格的水平长度尺度水平长度
- 4. javascript水平滚动文本
- 5. 水平滚动条宽度
- 6. 检测垂直滚动水平滚动UIScrollView与按钮
- 7. Android:当水平滚动视图停止滚动时检测
- 8. 水平滚动脚本
- 9. 文本框的水平滚动条
- 10. 文本框水平滚动错误
- 11. 如何让长菜单水平滚动?
- 12. 水平检测
- 13. 水平滚动
- 14. 水平滚动
- 15. 水平滚动
- 16. 水平滚动?
- 17. 水平滚动文字?
- 18. 水平滚动条和宽度自动
- 19. 水平滚动+滚动条
- 20. 使用垂直滚动检测UIScrollView中的水平滑动
- 21. 文本框内滚动型施胶用水平滚动
- 22. 添加水平滚动到fullcalendar调度
- 23. RecyclerView将被水平滚动,宽度为
- 24. 水平滚动100%图像高度
- 25. 100%宽度创建水平滚动条
- 26. 如何在角度水平滚动?
- 27. 100%宽度+水平和垂直滚动
- 28. Dropzone固定高度水平滚动
- 29. 1000宽度以下的水平滚动
- 30. 水平滚动表
我需要文本自动滚动,就像CNN上的“股票行情”一样。 – 2009-09-01 08:43:28