1，html内容部分
<!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>jquery左右翻屏菜单效果-www.jb200.com</title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(
function(){
var menu_width=$("#menu").width();//菜单外容器的宽度，该值是固定的，根据分辨率的大小而改变。
//alert(menu_width);
var menucont_width=$("#menucont").width();//菜单内容器的宽度，该内容器的宽度根据菜单的多少而确定
//alert(menucont_width);
//向左移动
$("#arrowl").click(function(){
var currentw=parseInt($("#menucont").css("left"));//点击向左按钮时查看当前菜单居左的位置
//alert("menucont_width:"+menucont_width);
var re_width=currentw+menu_width;//重新计算后的宽度,翻屏时根据外容器确定，向左移动多少是个负值，因此用外容器的宽度加上内容器向左的距离，即点击向右按钮向
右移动的距离，
//alert(re_width);
if(re_width>0){//左边到头
return false;
}
$("#menucont").animate({left: re_width}, "slow");
}
);
//向右移动
$("#arrowr").click(function(){
var currentw=parseInt($("#menucont").css("left"));
//alert("当前向左宽度："+currentw);
//alert("文字容器总的宽度："+menucont_width);
if((currentw+menucont_width)<menu_width)//右边到头
{
return false;
}
$("#menucont").animate({left: "-="+menu_width+""}, "slow");
}
);
}
);
</script>
</head>
<body>
<div id="menubox">
<div id="arrowl">
<
</div>
<div id="menu">
<div id="menucont">
<a href="#">脚本学堂</a><a href="#">脚本学堂</a><a href="#">脚本学堂</a><a href="#">脚本学习网</a><a href="#">脚本学堂</a><a href="#">脚本学堂</a><a
href="#">CSDN</a><a href="#">CSDN</a><a href="#">CSDN</a><a href="#">山东国税</a><a href="#">CSDN</a><a href="#">CSDN</a><a href="#">CSDN</a>
<a href="#">
博客园</a><a href="#">博客园2</a><a href="#">博客园3</a><a href="#">国税内网4</a><a href="#">博客园5</a><a href="#">php编程6</a><a href="#">脚本学堂
7</a><a href="#">脚本学堂8</a><a href="#">脚本学堂</a><a href="#">青岛财税网</a><a href="#">脚本学堂</a><a href="#">脚本学堂</a><a href="#">CSDN</a><a
href="#">CSDN</a><a href="#">CSDN</a><a href="#">山东国税</a><a href="#">CSDN</a><a href="#">CSDN</a><a href="#">CSDN</a><a href="#">博客园</a><a
href="#">博客园</a><a href="#">博客园</a><a href="#">国税内网</a><a href="#">博客园</a><a href="#">php编程</a>
</div>
</div>
<div id="arrowr">
>
</div>
</div>
</body>
</html>
2，css代码部分
body { margin: 0 auto; font-size:12px;font-family:"宋体",Verdana,Arial,Tahoma;}
form, ul, dt, dd, dl, p, h1, h2, h3, h4, h5, h6, h7 { margin: 0; padding: 0; list-style: none; }
img { border: none; }
.clear { overflow: hidden; clear: both; }
a { color: #555555; text-decoration: none; }
a:hover { color: #555555; text-decoration: underline; }
input, select, button { font: 12px Verdana,Arial,Tahoma; vertical-align: middle; }
#menubox{background:#164671;color:#fff;width:100%;height:26px;line-height:26px;vertical-align:middle;border:1px solid #dedede;margin:0 auto;}
#arrowl,#arrowr{float:left;width:3%;background:red;text-align:center;cursor: pointer;font-size:15px;}
#arrowr{float:right;}
#menu{float:left;width:94%;height:26px;overflow: hidden;position:relative;}
#menucont{position: absolute;line-height:26px;vertical-align:middle;white-space:nowrap;left:0px;}
#menucont a{color:#fff;margin:0px 6px;font-size:13px;}