JS无缝滚动效果-优快云博客

<!doctype html>
<title>javascript无缝滚动</title>
<meta charset="utf-8" />
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动" />
<style type="text/css">
	h1 {
		font: 400 16px/1 "Microsoft YaHei", KaiTi_GB2312, SimSun
	}
	#marquee {
		position: relative;
		width: 400px;
		overflow: hidden;
		border: 10px solid #8080C0;
	}
	#marquee img {
		border: 0px;
	}
	#marquee dl,
	#marquee dt,
	#marquee dd,
	#marquee a {
		float: left;
		margin: 0;
		padding: 0;
	}
	#marquee dl {
		width: 1000%;
		height: 150px;
	}
</style>
<script type="text/javascript">
var Marquee = function(id) {
	try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(e) {};
	var container = document.getElementById(id),
		original = container.getElementsByTagName("dt")[0],
		clone = container.getElementsByTagName("dd")[0],
		speed = arguments[1] || 10;
	clone.innerHTML = original.innerHTML;
	container.scrollLeft = clone.offsetLeft
	var rolling = function() {
		if(container.scrollLeft == 0) {
			container.scrollLeft = clone.offsetLeft;
		} else {
			container.scrollLeft--;
		}
	}
	var timer = setInterval(rolling, speed) //设置定时器
	container.onmouseover = function() {
			clearInterval(timer)
	} //鼠标移到marquee上时，清除定时器，停止滚动
	container.onmouseout = function() {
			timer = setInterval(rolling, speed)
	} //鼠标移开时重设定时器
}
window.onload = function() {
	Marquee("marquee");
}
</script>
<h1>javascript无缝滚动(向右滚动)</h1>
<div id="marquee">
	<dl>
		<dt>
			<a href="###"><img src="img/o_s017.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s018.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s019.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s020.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s021.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s022.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s023.jpg" alt="javascript无缝滚动"/></a>
		</dt>
		<dd></dd>
	</dl>
</div>

效果图：

<!doctype html>
<title>javascript无缝滚动 </title>
<meta charset="utf-8" />
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动 " />
<style type="text/css">
	h1 {
		font: 400 16px/1 "Microsoft YaHei", KaiTi_GB2312, SimSun
	}
	#marquee,
	#marquee li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#marquee {
		position: relative;
		height: 100px;
		width: 280px;
		overflow: hidden;
		border: 10px solid #c0c0c0;
	}
	#marquee a {
		display: block;
		padding: 5px;
		text-decoration: none;
		white-space: nowrap;
		color: #000;
	}
	#marquee a:hover {
		background: #efefda;
		color: #3bcdfe
	}
</style>
<script type="text/javascript">
var Marquee = function(id) {
	try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(e) {};
	var container = document.getElementById(id),
		original = container.getElementsByTagName("li")[0],
		speed = arguments[1] || 10,
		clone = original.cloneNode(true);
	container.appendChild(clone);
	var rolling = function() {
		if(container.scrollTop == clone.offsetTop) {
			container.scrollTop = 0;
		} else {
			container.scrollTop++;
		}
	}
	var timer = setInterval(rolling, speed) //设置定时器
	container.onmouseover = function() {
			clearInterval(timer)
		} //鼠标移到marquee上时，清除定时器，停止滚动
	container.onmouseout = function() {
			timer = setInterval(rolling, speed)
		} //鼠标移开时重设定时器
}
window.onload = function() {
	Marquee("marquee");
}
</script>
<h1>javascript无缝滚动(向上滚动)</h1>
<ul id="marquee">
	<li>
		<a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
	</li>
</ul>

效果图：

JS 无缝滚动