以下是 jQuery智能新闻速递插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<title>jQuery���������ٵݲ��</title>
<link rel="stylesheet" type="text/css" href="include/jquery.smarticker.css">
<link rel="stylesheet" type="text/css" href="include/style.css">
</head>
<body>
<div class="top-bar">
<div class="border-bottom blue"></div>
<div class="border-bottom yellow"></div>
<div class="border-bottom green"></div>
<div class="border-bottom darkgreen"></div>
<div class="border-bottom darkblue"></div>
<div class="border-bottom red"></div>
<div class="border-bottom orange"></div>
<div class="border-bottom purple1"></div>
</div>
<div class="container">
<div class="header">
<h1>��SmarTicker��</h1>
<h5>A jQuery Smart News Ticker Plugin</h5>
<h6>��SmarTicker�� Documentation By Meghdad Hadidi ver 1.0</h6>
</div>
<div class="content border-top lightgray blue">
<div class="padding">
<h3>1. Basic</h3>
<div class="smarticker1">
<ul>
<li><a href="#">News Title 1</a></li>
<li><a href="#">News Title 2</a></li>
<li><a href="#">News Title 3</a></li>
<li><a href="#">News Title 4</a></li>
<li><a href="#">News Title 5</a></li>
<li><a href="#">News Title 6</a></li>
</ul>
</div>
<div class="smarticker2">
<ul>
<li><a href="#">News Title 1</a></li>
<li><a href="#">News Title 2</a></li>
<li><a href="#">News Title 3</a></li>
<li><a href="#">News Title 4</a></li>
<li><a href="#">News Title 5</a></li>
<li><a href="#">News Title 6</a></li>
</ul>
</div>
<div class="smarticker3">
<ul>
<li><a href="#">News Title 1</a></li>
<li><a href="#">News Title 2</a></li>
<li><a href="#">News Title 3</a></li>
<li><a href="#">News Title 4</a></li>
<li><a href="#">News Title 5</a></li>
<li><a href="#">News Title 6</a></li>
</ul>
</div>
</div>
</div>
<div class="content lightgray border-top green">
<div class="padding">
<h3>2. Category & Subcategory Section</h3>
<p>If you add category & subcategory section, your smarticker will be like this:</p>
<div class="smarticker4">
<ul>
<li data-subcategory="Finance" data-category="Google News"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
<div class="smarticker5">
<ul>
<li data-subcategory="Finance" data-category="Google News"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
<div class="smarticker6">
<ul>
<li data-subcategory="Finance" data-category="Google News"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
</div>
</div>
<div class="content lightgray border-top orange">
<div class="padding">
<h3>3. Rainbow Magic</h3>
<p>
If you set data-color on news items, colors will animate and your smarticker will turn to rainbow:
</p>
<div class="smarticker5">
<ul>
<li data-subcategory="Finance" data-category="Google News" data-color="14ab05"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News" data-color="f45151"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News" data-color="23a0e8"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="14ab05"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News" data-color="cf29b9"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News" data-color="1979ab"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News" data-color="f45151"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="ed4c4c"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News" data-color="cf29b9"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News" data-color="f45151"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
<div class="smarticker6">
<ul>
<li data-subcategory="Finance" data-category="Google News" data-color="14ab05"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News" data-color="f45151"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News" data-color="23a0e8"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="14ab05"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News" data-color="cf29b9"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News" data-color="1979ab"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News" data-color="f45151"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="ed4c4c"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News" data-color="cf29b9"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News" data-color="f45151"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
<div class="smarticker7">
<ul>
<li data-subcategory="Finance" data-category="Google News" data-color="14ab05"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News" data-color="f45151"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News" data-color="23a0e8"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="14ab05"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News" data-color="cf29b9"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News" data-color="1979ab"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News" data-color="f45151"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="ed4c4c"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News" data-color="cf29b9"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News" data-color="f45151"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
<div class="smarticker8">
<ul>
<li data-subcategory="Finance" data-category="Google News" data-color="14ab05"><a href="#">World's cutest planes head West</a></li>
<li data-subcategory="Sports" data-category="Yahoo News" data-color="f45151"><a href="#">Rain pours on Murray US Open parade</a></li>
<li data-subcategory="Money" data-category="Google News" data-color="23a0e8"><a href="#">India rupee gains despite IMF bailout speculation</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="14ab05"><a href="#">China firm poaches Google exec</a></li>
<li data-subcategory="Sports" data-category="CNN News" data-color="cf29b9"><a href="#">Brennan: Manziel suspension barely counts</a></li>
<li data-subcategory="Tech" data-category="Fox News" data-color="1979ab"><a href="#">Dell to Cut Some Jobs in Lone Star State</a></li>
<li data-subcategory="Tech" data-category="Abc News" data-color="f45151"><a href="#">Back to School Apps That Save Students Money</a></li>
<li data-subcategory="Money" data-category="Usa Today" data-color="ed4c4c"><a href="#">Will oil price rise choke off stock rally?</a></li>
<li data-subcategory="Health" data-category="Abc News" data-color="cf29b9"><a href="#">Pa. Girl Home After Controversial Lung Transplant</a></li>
<li data-subcategory="Finance" data-category="Yahoo News" data-color="f45151"><a href="#">Oil off highs, shares up on likely delay in Syria action</a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="include/jquery.js"></script>
</body>
</html>CSS代码(style.css):
/* ---------------------Author:Meghdad HadidiFacebook:/meghdad.hadidiTwitter:@meghdadhadidiGmail:meghdadhadidi1@gmail.comURI:http://powerup.ir/projects/smarticker------------------------*/
body{text-align:center;margin:0;padding:0;}
pre.prettyprint{padding:15px;border:1px solid #ccc;border-radius:5px;overflow:hidden;font-size:12px;/*color:#777;font-size:13px;display:block;margin:10px 0 20px;background:#fefefe;*/
}
pre.prettyprint:hover{overflow:auto;}
pre strong{color:#cd2122;}
pre.small{}
pre span.com{color:#999;}
h3{font-size:20px;}
code{border:1px solid #ccc;border-radius:3px;padding:1px 5px;background:#fff;color:#a1a1a1;font-size:12px;}
.container{width:70%;margin:0 auto;min-height:100px;background:#fcfcfc;box-shadow:0px 0px 3px #ccc;}
.top-bar{position:fixed;top:0px;width:100%;/*background:#f9f9f9;border-bottom:3px solid #e6e6e6;*/
z-index:10;}
.top-bar div{width:12.5%;float:left;}
.logo{float:left;}
.scroll-nav{position:fixed;top:20px;}
.scroll-nav ol{list-style:none;direction:ltr;text-align:left;padding:0 0 0 10px;margin:0;}
.scroll-nav ol li a{text-decoration:none;font-family:Calibri,Tahoma;font-size:13px;color:#666;}
.scroll-nav ol li.active a{font-weight:bold;}
.header{font-family:Times New Roman;}
.container .header h1{font-style:italic;font-weight:bold;color:#666;margin-top:0;margin-bottom:0px;padding-top:20px;}
.container .header h5{margin-top:5px;margin-bottom:0px;color:#666;font-weight:normal;}
.container .header h6{font-weight:normal;color:#999;margin-top:10px;font-style:italic;font-family:calibri,Tahoma;font-size:13px;}
.content{direction:ltr;text-align:left;line-height:21px;font-family:Calibri,Tahoma;font-size:14px;color:#666;}
.col{float:left;min-height:50px;}
.col1{width:33%;}
.col2{width:66%;}
.right{float:right;}
.content .col:last-child,.cf{clear:both;float:none;display:block;min-height:0;height:0;font-size:0;line-height:0;}
.padding{padding:15px 25px;}
.border-bottom{border-bottom:3px solid #ccc;}
.border-top{border-top:3px solid #ccc;}
.blue{background:#3498db;color:#f9f9f9;border-color:#3498db;}
.yellow{border-color:#f4ec0b;}
.green{border-color:#2ecc71;}
.darkgreen{border-color:#16a085;}
.darkblue{border-color:#2980b9;}
.red{border-color:#fe331e;}
.gray{background:#eee;color:#666;}
.purple{border-color:#9b59b6;}
.orange{border-color:#f39c12;}
.purple1{border-color:#ef00c5;}
.lightgray{background-color:#fcfcfc;color:#666;}
.red::selection{background:#ffb7b7;}
.red::-moz-selection{background:#ffb7b7;}
p.blue::selection{background:#f1c40f;}
p.blue::-moz-selection{background:#f1c40f;}
.yellow::selection{background:#fff2a8;}
.yellow::-moz-selection{background:#fff2a8;}
.footer{font-family:Calibri,Tahoma;font-size:12px;color:#666;background:#eee;}
.smarticker{margin-bottom:30px;}
分享到QQ
分享到微博
微信扫一扫
