这样的效果怎么写？

操作容器的scrollLeft/scrollRight来实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;}
#nav {
height: 30px;
width: 500px;
background-color: #c00;
margin:0 auto;
height:auto;
overflow:hidden/*注意这里，修改过了*/
}
#nav ul {
 
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
/*overflow:hidden;  这个不需要*/
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
</style>
</head>
<body><table><tr><td><a href="#">&lt;</a></td><td><div id="nav">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
<li>test11</li>
<li>test12</li>
<li>test13</li>
<li>test14</li>
<li>test15</li>
<li>test16</li>
<li>test17</li>
<li>test18</li>
</ul>
</div></td><td><a href="#">&gt;</a></td></tr></table><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script>
     var step = 10, nav = $('#nav')[0];
     $('td >a').click(function () {
         var l = this.innerHTML.toLowerCase() == '&lt;';
         nav.scrollLeft += l ? -step : step;
         return false;
     });
 </script>
</body>
</html>

解决方案 »

  1.   

    HTML部分还是1楼的,自行调整step,speed的值查看效果
     <script>
         var step = 2, nav = $('#nav')[0];
     var speed = 30,inter;
         $('td >a').mousedown(function () {
             var l = this.innerHTML.toLowerCase() == '&lt;';
     inter = setInterval(function(){
    nav.scrollLeft += l ? -step : step;
     },speed);         
             return false;
         }).mouseup(function(){
    clearInterval(inter);
     });
     </script>