<!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>
js左右滾動效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.