自己动手编写jQuery滚动新闻(jQuery News Ticker)插件

最新推荐文章于 2024-08-22 08:47:46 发布

系统信息

最新推荐文章于 2024-08-22 08:47:46 发布

阅读量5.2k

点赞数

分类专栏：前台技术文章标签： jquery function javascript class div css

本文链接：https://blog.csdn.net/softwave/article/details/4784613

版权

前台技术专栏收录该内容

95 篇文章 3 订阅

订阅专栏

这是一款基于jQuery的滚动新闻插件，使用的是li-scroller.1.0，效果如下图所示：

这款插件简单朴素，可以对CSS进行简单修改后，变为自己喜欢的风格。

使用方法：

1.创建一个js文件，内容如下：

jQuery.fn.liScroll = function(settings) { settings = jQuery.extend({ travelocity: 0.07 }, settings); return this.each(function(){ var $strip = jQuery(this); $strip.addClass("newsticker") var stripWidth = 0; var $mask = $strip.wrap("<div class='mask'></div>"); var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>"); var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width $strip.find("li").each(function(i){ stripWidth += jQuery(this, i).width(); }); $strip.width(stripWidth); var defTiming = stripWidth/settings.travelocity; var totalTravel = stripWidth+containerWidth; function scrollnews(spazio, tempo){ $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);}); } scrollnews(totalTravel, defTiming); $strip.hover(function(){ jQuery(this).stop(); }, function(){ var offset = jQuery(this).offset(); var residualSpace = offset.left + stripWidth; var residualTime = residualSpace/settings.travelocity; scrollnews(residualSpace, residualTime); }); }); };

2.在页面中导入jquery 1.3.2的js文件和第一步所创建的js文件

3.在网页<head>部分里加入：

$(function(){ $("ul#ticker").liScroll({travelocity: 0.15}); });

4.将你想作为滚动的内容以下列代码形式写出

<ul id="ticker"> <li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete" mce_href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li> <li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete" mce_href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li> <li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete" mce_href="#/ogt/content/news/News177.complete">The code that you want to run</a></li> <li><span>08/10/2007</span><a href="#/ogt/content/news/News176.complete" mce_href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li> <li><span>08/10/2007</span><a href="#/ogt/content/news/News178.complete" mce_href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li> </ul>

5.运行页面即可

参数修改： 如果想要改变滚动速度，只需修改第三步中的travelocity属性值即可。