What's a good bit of JS or JQuery for horizontally scrolling news ticker

亡梦爱人 提交于 2019-11-28 04:26:12

问题


I am looking for a little bit of JQuery or JS that allows me to produce a horizontally scrolling "news ticker" list.

The produced HTML needs to be standards compliant as well.

I have tried liScroll but this has a habit of breaking (some content ends up on a second line at the start of the scroll), especially with longer lists.

I have also tried this News Ticker but when a DOCTYPE is included the scrolling will jolt rather than cycle smoothly at the end of each cycle.

Any suggestions are appreciated.

Edit

So thanks to Matt Hinze's suggestion I realised I could do what I wanted to do with JQuery animate (I require continuous scrolling not discrete scrolling like the example). However, I quickly ran into similar problems to those I was having with liScroll and after all that realised a CSS issue (as always) was responsible.

Solution: liScroll - change the default 'var stripWidth = 0' to something like 100, to give a little space and avoid new line wrapping.


回答1:


Smooth Div Scroll can also be used as a news ticker/stock ticker. It can pause on mouse over or mouse down and it can loop endlessly if you want it to.

Here's the example with a running ticker.




回答2:


http://www.emrecamdere.com/news_scroller_jquery.html




回答3:


Here's 2 other solutions that seem a bit simpler to implement:

  1. newsticker
  2. News ticker (BBC style)



回答4:


An Alternative solution would also be the jQuery webTicker; its very similar to liscroll however resolves the problem with the ticker stopping after the whole list completes; whilst also adding some new fancy features like; direction of movement; speed; and ability to use multiple tickers per page.




回答5:


The second line bug arising in liscroll can be "fixed" by adding a listitem containing a non-breakable space entitiy <li>&nbsp;</li> at the end of each list ;)



来源:https://stackoverflow.com/questions/41027/whats-a-good-bit-of-js-or-jquery-for-horizontally-scrolling-news-ticker

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!