一个网页元素移动位置的问题

这样的效果？

解决方案 »

  1.   

    比较简单的实现
    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    div{overflow:hidden;width:400px;height:200px;border:solid 1px #000;}
    ul{margin:0;padding:0;}
    li{float:left;background-color:#aaa;margin:1px;}
    </style>
    </head>
    <body>
    <div>
    <ul id="list">
    <li>00001</li>
    <li>00002</li>
    </ul>
    </div>
    <button onclick="fun(-5)">向左</button>
    <button onclick="fun(5)">向右</button>
    <script type="text/javascript">
    var left = 0;
    function fun(offset)
    {
    var ul = document.getElementById("list");
    left += offset;
    ul.style.marginLeft = left+"px";
    }
    </script>
    </body>
    </html>