现在利用jquery实现滑动菜单是非常简单的一件事情，下面我们来一款滑动菜单利用jquery实现的代码吧。
<html>
<head>
<title>here</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body style="text-align: center;">
<div style="width:540px; margin: 0 auto;">
<div id="button1" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">1</div>
<div id="button2" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">2</div>
<div id="button3" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">3</div>
<div id="button4" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">4</div>
<div id="button5" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">5</div>
<div id="button6" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">6</div>
<div id="button7" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">7</div>
<div id="button8" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">8</div>
<div id="button9" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">9</div>
<div id="button10" class="button" style="float:left;width:50px;margin:2px;background-color:#f00; cursor:pointer;">10</div>
</div>
<div style="clear: both"></div>
<div style="width: 540px; margin: 0 auto; height: 400px; position: relative; z-index: 999; overflow: hidden;">
<div style="position:relative;padding:0px;margin:0 auto;width:100px;">
<div id="list" style="width:1000px;height:400px;position:absolute; z-index:9;left:-220px;">
<div style="width:96px;height:400px;background-color:#004;margin:2px;float:left;color:#fff;">1</div>
<div style="width:96px;height:400px;background-color:#008;margin:2px;float:left;color:#fff;">2</div>
<div style="width:96px;height:400px;background-color:#00f;margin:2px;float:left;color:#fff;">3</div>
<div style="width:96px;height:400px;background-color:#044;margin:2px;float:left;color:#fff;">4</div>
<div style="width:96px;height:400px;background-color:#048;margin:2px;float:left;color:#fff;">5</div>
<div style="width:96px;height:400px;background-color:#04f;margin:2px;float:left;color:#fff;">6</div>
<div style="width:96px;height:400px;background-color:#444;margin:2px;float:left;color:#fff;">7</div>
<div style="width:96px;height:400px;background-color:#448;margin:2px;float:left;color:#fff;">8</div>
<div style="width:96px;height:400px;background-color:#44f;margin:2px;float:left;color:#fff;">9</div>
<div style="width:96px;height:400px;background-color:#484;margin:2px;float:left;color:#fff;">10</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var speed = 1000;
var div_width = $("#list > div:first").width() + parseint($("#list > div:first").css教程("margin-left")) + parseint($("#list > div:first").css("margin-right"));
var offset = 220;
$(".button").click(function(){
id = $(this).attr("id").replace("button","");
var _length = -(id - 1) * div_width - offset;
$("#list").animate({left:_length + "px"},speed);
});
});
</script>
</html>