求一个javascript控制div左右移动效果！！源码

我要一种如：  北京，天津，上海，杭州，苏州<  天津  上海  北京  >点击<或者>可以实现左右滚动，我要javascript和div的，不要ul   li 的求源码

解决方案 »

  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=utf-8" />
    <title>test</title>
    <script language="javascript" type="text/javascript">
        var scrollFun = function (dir) {
            var box = document.getElementById("box");
            var con = document.getElementById("con");
            var boxWidth = box.offsetWidth;
            var conWidth = con.offsetWidth;
            var left = +con.style.left.replace("px", "");
            if (dir === "left") {
                if (left <= boxWidth - conWidth) {
                    return;
                }
                con.style.left = (left - 40) + "px";
            }
            else if (dir === "right") {
                if (left === 0) {
                    return;
                }
                con.style.left = (left + 40) + "px";
            }    };
        window.onload = scrollFun;
    </script>
    <style type="text/css">
        .box{ border:1px solid red; width:40px; height:50px; position:relative; overflow:hidden;}
        .con{ position:absolute; top:20px; white-space:nowrap;}
    </style>
    </head><body>
    <input type="button" onclick="scrollFun('left')" value="左" />
    <input type="button" onclick="scrollFun('right')" value="右" />
    <div id="box" class="box">
        <div id="con" class="con" >滚动1滚动2滚动3滚动4滚动5滚动6滚动7滚动8滚动9</div>
    </div>
    </body>
    </html>
      

  2.   

    简单的，自己优化
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
    </head>
    <body>
    <script type="text/javascript">function moveDiv(fx)
    {
      var obj=document.getElementById('div1');
      var nowleft=parseInt(obj.style.left);
      if(fx=='left')
      {
        obj.style.left=nowleft+ 5;
      }
      if(fx=='right')
      {
        obj.style.left=nowleft- 5;
      }
    }
    </script>
        <form id="form1" runat="server">
        <div>
        <div id='div1' style="width:150px; position:absolute;top:100px;left:100px;">
        北京 天津 上海
        </div>
        <input type="button" value="左" onclick="moveDiv('left')" />
        <input type="button" value="右" onclick="moveDiv('right')" />
        </div>
        </form>
    </body>
    </html>
      

  3.   

    这个是有动画效果的
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
    </head>
    <body>
    <script type="text/javascript">
    function moveDiv(fx,distance)//fx是移动方向，distance为移动距离
    {
      var obj=document.getElementById('div1');
      var nowleft=parseInt(obj.style.left);
      var step=5;
      if(distance-step<0) step=distance;
      if(fx=='left')
      {
        obj.style.left=nowleft- step;
      }
      if(fx=='right')
      {
        obj.style.left=nowleft+ step;
      }
      distance-=step;
      if(distance==0) return; 
      setTimeout(function(){moveDiv(fx,distance);},10);
    }
    </script>
        <form id="form1" runat="server">
        <div>
        <div id='div1' style="width:150px; position:absolute;top:100px;left:100px;">
        北京 天津 上海
        </div>
        <input type="button" value="左" onclick="moveDiv('left',100)" />
        <input type="button" value="右" onclick="moveDiv('right',100)" />
        </div>
        </form>
    </body>
    </html>