jQuery新闻垂直滚动展示js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery新闻垂直滚动展示js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery新闻垂直滚动展示</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.totemticker.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#vertical-ticker').totemticker({
				row_height	:	'100px',
				next		:	'#ticker-next',
				previous	:	'#ticker-previous',
				stop		:	'#stop',
				start		:	'#start',
				mousestop	:	true,
			});
		});
	</script>
</head>
<body>
	<div id="banner"> 
		<div class="logo-zone"><h1 id="logo-link"><a href="#">Build Internet</a></h1></div> 
		<div class="clear">&nbsp;</div>
	</div>
	<div id="wrapper">
		<h1 class="logo">Totem Ticker</h1>
		<ul id="vertical-ticker">
			<li>One Time</li>
			<li>Baby</li>
			<li>One Less Lonely Girl</li>
			<li>Somebody to Love</li>
			<li>Eenie Meenie</li>
			<li>Never Say Never</li>
			<li>U Smile</li>
		</ul>
		<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
		<p>Roll over the ticker to stop scrolling</p>
	</div>
</body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;}
body{font-family:Lucida Grande,Helvetica,Arial,sans-serif;background:url('../images/demo-bg.jpg') center 105px no-repeat #1a110a;-webkit-font-smoothing:antialiased;}
h1.logo{overflow:hidden;text-indent:-9999em;width:230px;height:70px;margin:0 auto 15px auto;background:url('../images/totem-logo.png') top left no-repeat;}
/* Top Banner */
#banner .clear{height:0px;width:100%;overflow:hidden;visibility:hidden;display:block;}
#banner{z-index:100;background:#1a1a1a;padding:10px 0;width:100%;display:block;}
#banner.transparent{background-color:transparent;}
#banner.above{position:absolute;top:0;left:0;}
#banner .logo-zone{height:auto;clear:left;float:left;overflow:hidden;}
#banner h1#logo-link{height:57px;width:160px;margin:24px 12px;background:url('../images/build-internet-logo-shadow.png') no-repeat top left;}
#banner h1#logo-link a{text-indent:-9999px;display:block;height:100%;width:100%;text-decoration:none;}
#wrapper{padding:30px;width:300px;margin:0 auto;}
p{color:#fff;padding:10px 0;text-align:center;}
.nav{}
#wrapper a,#footer a{color:#e8914c;text-decoration:none;border-bottom:1px dotted #e8914c;}
#wrapper a:hover,#footer a:hover{color:#eab209;border-bottom:1px dotted #eab209;}
#footer{margin-top:20px;text-transform:uppercase;font-size:11px;letter-spacing:1px;}
#footer p{color:rgba(255,255,255,.5);}
/*This is the only semi-important stuff for plugin installationIt's just an example,so customize away!*/
#vertical-ticker{height:400px;overflow:hidden;margin:0;padding:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);}
#vertical-ticker li{padding:35px 20px;display:block;background:#efefef;color:#333;border-bottom:1px solid #ddd;text-align:center;font-size:25px;font-weight:bold;font-family:Helvetica Neue,times,serif;}

附件:下载该文件资源,减少时间成本(增值服务)