jQuery新闻滚动跑马灯效果js代码

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

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

以下是 jQuery新闻滚动跑马灯效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title>jQuery</title>
		<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				var _scroll = {
					delay: 1000,
					easing: 'linear',
					items: 1,
					duration: 0.07,
					timeoutDuration: 0,
					pauseOnHover: 'immediate'
				};
				$('#ticker-1').carouFredSel({
					width: 1000,
					align: false,
					items: {
						width: 'variable',
						height: 35,
						visible: 1
					},
					scroll: _scroll
				});

				$('#ticker-2').carouFredSel({
					width: 1000,
					align: false,
					circular: false,
					items: {
						width: 'variable',
						height: 35,
						visible: 2
					},
					scroll: _scroll
				});

				//	set carousels to be 100% wide
				$('.caroufredsel_wrapper').css('width', '100%');

				//	set a large width on the last DD so the ticker won't show the first item at the end
				$('#ticker-2 dd:last').width(2000);
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 300px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				width: 100%;
				margin: -100px 0 0 0;
				position: absolute;
				left: 0;
				top: 50%;
			}
			#wrapper h3 {
				font-size: 20px;
				text-align: center;
			}
			
			#wrapper > div {
				background-color: #eee;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				width: 100%;
				height: 30px;
				padding: 15px 0;
				overflow: hidden;
			}
			#wrapper > div.first {
				border-bottom: none;
			}
			
			#wrapper dl {
				display: block;
				margin: 0;
			}
			#wrapper dt, #wrapper dd {
				display: block;
				float: left;
				margin: 0 10px;
				padding: 5px 10px;
			}
			#wrapper dt {
				background-color: #f66;
				color: #fff;
			}
			#wrapper dd {
				color: #333;
				margin-right: 50px;
			}

			code {
				font-style: italic;
			}
			
			#donate-spacer {
				height: 100%;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h3>News Tickers</h3>
			<div class="first">
				<dl id="ticker-1">
					<dt>News ticker</dt>
						<dd>A news ticker (sometimes referred to as a &quot;crawler&quot;) resides in the lower third of the television screen space on television news networks dedicated to presenting headlines or minor pieces of news.</dd>
	
					<dt>Scoreboard style</dt>
						<dd>It may also refer to a long, thin scoreboard-style display seen around the front of some offices or public buildings.</dd>
	
					<dt>WWW</dt>
						<dd>Since the growth in usage of the World Wide Web, news tickers have largely syndicated news posts from the websites of the broadcasting services which produce the broadcasts.</dd>
				</dl>
			</div>
			<div>
				<dl id="ticker-2">
					<dt>Back and forth</dt>
						<dd>By simply setting the option <code>circular</code> to <code>false</code>, this news ticker will go back and forth.</dd>

					<dt>PauseOnHover</dt>
						<dd>Because the option <code>pauseOnHover</code> is set to <code>&quot;immediate&quot;</code>, these news tickers will immediately stop scrolling if you move your mouse over them.</dd>
	
					<dt>Any kind of HTML</dt>
						<dd>These news tickers may contain any kind of HTML, such as <a href="#">hyperlinks</a>, <em>formatted</em> <strong>text</strong> or even images.</dd>
				</dl>
			</div>
		</div>
		<div id="donate-spacer"></div>
	</body>
</html>

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