简单效果——滚动展示

简单效果——滚动展示
作者：Neoxone 发表时间： 2010年01月29号，星期五阅读：4,709 次

上回的文章里提到了文字滚屏效果。是无限滚动下去的。
现在弄一个可控制的单步滚动效果。

<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8">
<title>横向滚动控制</title>
<script src="http://www.cssass.com/public/js/extend.js"></script>
<style type="text/css">
*{padding:0;margin:0;}
.wrap{position:relative;width:735px;overflow:hidden;}
#rollBox{overflow:hidden;margin:0 50px;}
#rollList{float:left;overflow:hidden;zoom:1;margin-right:-3000px;}  /* float,margin-right为了横版排列 */
#rollList li{float:left;display:inline;margin:15px;}
#rollList img{display:block;border:1px solid #efefef;}
.rollMenu{position:absolute;width:35px;height:80px;font-size:70px;text-decoration:none;color:#6B90DA;text-align:center;}
#rollLeft{top:20px;left:0;}
#rollRight{top:20px;right:0;}
</style>
</head>
<body>
<div class="wrap">
		<a onclick="scrollHori.start(this);" class="rollMenu" id="rollLeft" href="javascript:;">&#8249;</a>
		<a onclick="scrollHori.start(this);" class="rollMenu" id="rollRight" href="javascript:;">&#8250;</a>
		<div id="rollBox">
			<ul id="rollList">
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/></a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var scrollHori={
				locked:0,
				vector:0,
				start:function(thiso){
					if (scrollHori.locked == 0){
						if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) {
							scrollHori.vector = -5;
							scrollHori.scroll();
						}
						if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){
							scrollHori.vector = 5;
							scrollHori.scroll();
						}
					}
				},
				scroll:function(){
					var step=0;
					var size=$id('rollList').offsetWidth/$tag('li',$id('rollList')).length;
					play = setInterval(function(){
							if(size>step){
								$id('rollBox').scrollLeft+=scrollHori.vector;
								step+=Math.abs(scrollHori.vector);
								scrollHori.locked = 1;
							}
							else{
								scrollHori.stop();
							}
						}, 5);
				},
				stop:function(){
					if (window.play) {
						clearInterval(window.play);
						scrollHori.locked = 0;
					}
				}
			}
</script>
</div>
</body>
</html>

var scrollHori={
locked:0, //锁死
vector:0, //左右向量
start:function(thiso){
if (scrollHori.locked == 0){
if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) { //按到往左按钮，且在左侧有内容
scrollHori.vector = -5;
scrollHori.scroll();
}
if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){ //按到往右按钮，且在右侧有内容
scrollHori.vector = 5;
scrollHori.scroll();
}
}
},
scroll:function(){
var step=0;
var size=$id('rollList').offsetWidth/$tag('li',$id('rollList')).length; //单个内容总宽（包括margin）
play = setInterval(function(){
if(size>step){ //单步滚动
$id('rollBox').scrollLeft+=scrollHori.vector;
step+=Math.abs(scrollHori.vector);
scrollHori.locked = 1; //滚动的时候锁死
}
else{
scrollHori.stop();
}
}, 5);
},
stop:function(){
if (window.play) {
clearInterval(window.play); //清除反复
scrollHori.locked = 0; //开锁
}
}
}

竖排的话可以省力很多。
（不过下面的效果本来就更简单）

<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8">
<title>纵向滚动控制</title>
<style type="text/css">
*{padding:0;margin:0;}
a{font-size:12px;text-decoration:none;color:#6B90DA;}
.wrap{position:relative;overflow:hidden;width:140px;}
#rollBox{margin:30px 0;height:360px;overflow:hidden;}
#rollList li{height:106px;overflow:hidden;text-align:center;padding-top:13px;}
#rollList li img{display:block;margin:0 auto;border:1px solid #efefef;}
.rollMenu{position:absolute;width:140px;height:30px;line-height:30px;font-size:30px;text-align:center;}
#rollUp{top:0px;}
#rollDown{bottom:0px;}
</style>
</head>
<body>
<div class="wrap">
<a onmouseout="scrollVert.stop();" onmouseover="scrollVert.play(this);" href="javascript:;" id="rollUp" class="rollMenu">&#9650;</a>
<a onmouseout="scrollVert.stop();" onmouseover="scrollVert.play(this);" href="javascript:;" id="rollDown" class="rollMenu">&#9660;</a>
<div id="rollBox">
	<ul id="rollList">
		<li>
			<a href="#"><img height="80" width="114"  src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a>
		</li>
		<li>
			<a href="#"><img height="80" width="114"  src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a>
		</li>
		<li>
			<a href="#"><img height="80" width="114"  src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a>
		</li>
		<li>
			<a href="#"><img height="80" width="114"  src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a>
		</li>
	</ul>
</div>
<script type="text/javascript">
var $id=function(id){ return document.getElementById(id);}
var scrollVert={
locked: 0,
vector: 0,
play:function(thiso){
	if (scrollVert.locked == 0) {
		if (thiso.id == 'rollUp') {
			scrollVert.vector = 1;
		}
		if (thiso.id == 'rollDown') {
			scrollVert.vector = -1;
		}
		roll = setInterval(function(){
			$id('rollBox').scrollTop+=scrollVert.vector;
		}, 10);
		scrollVert.locked = 1;
	}
},
stop: function(){
	if (window.roll) {
		clearInterval(window.roll);
		scrollVert.locked = 0;
	}
}
}
</script>
</div>
</body>
</html>