特效描述：基于jQuery实现 导航条 文字滚动 新闻插件代码。基于jQuery实现导航条文字滚动新闻插件代码
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/jquery.smarticker.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
2. 引入JS
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/smarticker.js"></script>
3. HTML代码
<div class="container"> <div class="content border-top lightgray blue"> <div class="padding"> <h3>1. 基础</h3> <div class="smarticker1"> <ul> <li><a href="#">新闻标题 1</a></li> <li><a href="#">新闻标题 2</a></li> <li><a href="#">新闻标题 3</a></li> <li><a href="#">新闻标题 4</a></li> <li><a href="#">新闻标题 5</a></li> <li><a href="#">新闻标题 6</a></li> </ul> </div> <div class="smarticker2"> <ul> <li><a href="#">新闻标题 1</a></li> <li><a href="#">新闻标题 2</a></li> <li><a href="#">新闻标题 3</a></li> <li><a href="#">新闻标题 4</a></li> <li><a href="#">新闻标题 5</a></li> <li><a href="#">新闻标题 6</a></li> </ul> </div> <div class="smarticker3"> <ul> <li><a href="#">新闻标题 1</a></li> <li><a href="#">新闻标题 2</a></li> <li><a href="#">新闻标题 3</a></li> <li><a href="#">新闻标题 4</a></li> <li><a href="#">新闻标题 5</a></li> <li><a href="#">新闻标题 6</a></li> </ul> </div> </div> </div> <div class="content lightgray border-top green"> <div class="padding"> <h3>2. 类别和子类别部分</h3> <p>如果你添加类别和子类别部分,smarticker将是这样的:</p> <div class="smarticker4"> <ul> <li data-subcategory="金融" data-category="谷歌新闻"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> <div class="smarticker5"> <ul> <li data-subcategory="金融" data-category="谷歌新闻"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> <div class="smarticker6"> <ul> <li data-subcategory="金融" data-category="谷歌新闻"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> </div> </div> <div class="content lightgray border-top orange"> <div class="padding"> <h3>3. 彩虹魔法</h3> <p>如果你设置data-color新闻、颜色将动画和smarticker彩虹:</p> <div class="smarticker5"> <ul> <li data-subcategory="金融" data-category="谷歌新闻" data-color="14ab05"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻" data-color="f45151"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻" data-color="23a0e8"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国" data-color="14ab05"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描" data-color="cf29b9"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻" data-color="1979ab"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News" data-color="f45151"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today" data-color="ed4c4c"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News" data-color="cf29b9"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News" data-color="f45151"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> <div class="smarticker6"> <ul> <li data-subcategory="金融" data-category="谷歌新闻" data-color="14ab05"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻" data-color="f45151"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻" data-color="23a0e8"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国" data-color="14ab05"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描" data-color="cf29b9"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻" data-color="1979ab"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News" data-color="f45151"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today" data-color="ed4c4c"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News" data-color="cf29b9"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News" data-color="f45151"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> <div class="smarticker7"> <ul> <li data-subcategory="金融" data-category="谷歌新闻" data-color="14ab05"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻" data-color="f45151"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻" data-color="23a0e8"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国" data-color="14ab05"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描" data-color="cf29b9"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻" data-color="1979ab"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News" data-color="f45151"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today" data-color="ed4c4c"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News" data-color="cf29b9"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News" data-color="f45151"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> <div class="smarticker8"> <ul> <li data-subcategory="金融" data-category="谷歌新闻" data-color="14ab05"><a href="#">世界上最可爱的飞机头</a></li> <li data-subcategory="体育" data-category="雅虎新闻" data-color="f45151"><a href="#">雨倾泻在穆雷美国公开赛游行</a></li> <li data-subcategory="财富" data-category="谷歌新闻" data-color="23a0e8"><a href="#">印度卢比上涨,尽管国际货币基金组织(IMF)救援投机</a></li> <li data-subcategory="财富" data-category="今日美国" data-color="14ab05"><a href="#">中国公司挖走谷歌高管</a></li> <li data-subcategory="体育" data-category="新闻扫描" data-color="cf29b9"><a href="#">布伦南:Manziel暂停计数</a></li> <li data-subcategory="科技" data-category="福克斯新闻" data-color="1979ab"><a href="#">戴尔将一些工作在孤星之州</a></li> <li data-subcategory="科技" data-category="Abc News" data-color="f45151"><a href="#">回到学校学生省钱的应用</a></li> <li data-subcategory="财富" data-category="Usa Today" data-color="ed4c4c"><a href="#">石油价格上涨抑制股市吗?</a></li> <li data-subcategory="健康" data-category="Abc News" data-color="cf29b9"><a href="#">Pa。有争议的肺移植后女孩回家</a></li> <li data-subcategory="金融" data-category="Yahoo News" data-color="f45151"><a href="#">石油高点,股票可能会推迟在叙利亚行动</a></li> </ul> </div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>
