基于jQuery实现导航条文字滚动新闻插件代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

226 902 301



特效描述:基于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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到