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

<!-- Google 728*90横幅广告开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 728x90, 大横幅正文上方 */ google_ad_slot = "4725362798"; google_ad_width = 728; google_ad_height = 90; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!-- Google 728*90横幅广告结束-->


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

插件图片

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

使用方法:

1.创建一个js文件,内容如下:

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

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

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

5.运行页面即可

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


<!-- Google 728*90横幅广告开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 728x90, 大横幅正文下方 */ google_ad_slot = "4725362798"; google_ad_width = 728; google_ad_height = 90; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!-- Google 728*90横幅广告结束-->


<!-- 新Google 468x15 横链接单元开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!-- 新Google 468x15 横链接单元结束-->


<!-- Google Reader shared发布代码开始 -->

<script src="http://www.google.com/reader/ui/publisher.js" type="text/javascript"></script><script src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC" type="text/javascript"></script>

<!-- Google Reader shared发布代码结束 -->

你可能感兴趣的:(jquery)