js上下滚动效果 _JavaScript

js左右滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animate demo</title>
<style type="text/css">
<!--
*{margin:0;padding:0;color:#fff;}
.ar_tab2{position:relative;width:746px;margin:100px auto;background:#131313;padding:0 6px;}
#tab_dl{width:646px;overflow:hidden;margin:0 30px;}
#tab_dt{width: 1200px;margin-left:0px;} 
#tab_dt a{color: #888888;cursor: pointer;display: block;float: left;height: 25px;line-height: 25px;padding: 0 16px;text-align: center;/*text-shadow: 0 2px 0 #000000;*/}
#leftA{float:left;margin-top:8px;cursor:pointer;} 
#rightA{float:right;margin-top:8px;cursor:pointer;}
-->
</style> 
</head>
<body>
<div class="ar_tab2">
<img src="images/left_a.png" alt=""  id="leftA" />
<img src="images/right_a.png" alt="" id="rightA" />

<dl id="tab_dl">
	<dt id="tab_dt"> 
				<a class="">All</a><a class="">Rock</a><a>pop</a><a>Metal</a><a>NewAge</a><a class="">Country</a><a class="ar_tabActive">Gospel</a><!--<a>Funk</a>--><a>World</a><a>Classical</a><a>Classical</a><a>Classical</a><a>Classical</a><a>Classical</a>
	</dt>
</dl>

</div>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<script type="text/javascript">
//<!--[CDATA[
/**
 * @effect.
 * @depend jQuery frame
 * @function name animate
 * @param dir() step()
 * @create 12/20/2010
*/
var animate = function (dir, step) { 
	var position; 
	var contentwidth; 
	var sliderwidth;
	position = parseInt($("#tab_dt").css("margin-left"));
	contentwidth = parseInt($("#tab_dt").css("width")); 
	sliderwidth = parseInt($("#tab_dl").css("width")); 
	switch (dir) { 
		case "right": 
			if(((position - step) < (sliderwidth - contentwidth))){
				position = (sliderwidth - contentwidth);
				$("#leftA").show();
				$("#rightA").hide();
			}else{
				$("#leftA").show();
				position = (position - step);
			}
			//position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step); 
			break; 
		case "left": 
			if(((position + step) > 0)){
				position = 0;
				$("#rightA").show();
				$("#leftA").hide();
			}else{
				$("#rightA").show();
				position = position + step;
			}
			//position = ((position + step) > 0) ? 0 : (position + step); 
			break; 
		default: 
			break; 
	}; 
	$("#tab_dt").animate({ marginLeft: position + "px" },200 ); 
}

$(document).ready(function() { 
	//$("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px"); 
	$("#leftA").click(function() { 
		animate("left", 100); 
	}); 
	$("#rightA").click(function() { 
		animate("right", 100); 
	}); 
});
//]]-->
</script> 
</body> 
</html>