这种左右点按钮的导航菜单效果如何做啊？

用有滚动条的标签元素，例如div、span去包着所有中间内容，然后通过改变这个标签的scrollLeft去实现。<style>span{width:400px; overflow:hidden; white-space:nowrap; }</style><button onmousedown="m(0)">←</button>
<span id="a">
0000000000
1111111111
2222222222
3333333333
4444444444
5555555555
6666666666
7777777777
8888888888
9999999999
</span>
<button onmousedown="m(1)">→</span>
<script>
var tt=null
function m(i){
if(i==0){document.getElementById("a").scrollLeft++;tt=setTimeout("m("+i+")");}
if(i==1){document.getElementById("a").scrollLeft--;tt=setTimeout("m("+i+")");}
}
document.onmouseup=function(){clearTimeout(tt)}
</script>

解决方案 »

  1.   

    上面的代码有问题，<button   onmousedown= "m(1) " >→ </span > 我已经改成button了，然后上面代码执行也不能达到预期效果，加了DIV把SPAN包围起来也不行啊
      

  2.   

    <style >span{width:400px;   overflow:hidden;   white-space:nowrap;   } </style ><button   onmousedown= "m(0) " >← </button >
    <span   id= "a " >
    0000000000
    1111111111
    2222222222
    3333333333
    4444444444
    5555555555
    6666666666
    7777777777
    8888888888
    9999999999
    </span >
    <button   onmousedown= "m(1) " >→ </button >
    </span >
    <script >
    var   tt=null
    function   m(i){
    if(i==0){document.getElementById( "a ").scrollLeft=document.getElementById( "a ").scrollLeft+10;tt=setTimeout( "m( "+i+ ") ");}
    if(i==1){document.getElementById( "a ").scrollLeft=document.getElementById( "a ").scrollLeft-10;tt=setTimeout( "m( "+i+ ") ");}
    }
    document.onmouseup=function(){clearTimeout(tt)}
    </script >
      

  3.   

    LS的，IE6下不能用啊？你成功了？
      

  4.   

    明白了，发现这个写法不兼容xhtml
    <!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" >
    我去掉我页面的这个才能成功的
      

  5.   

    我测试时没有考虑这个，如果加了文档声明，就必须把span的diaplsy定为inline-block（onlyIE），要么就把三个元素都设置float=left，灵活运用。