用JS做个div图层的移动

在一个框中有两个重叠的层（默认状态下只显示第一个，层的大小和框一样），两侧各有一个按钮，点击左边的按钮时第一个层向左移动（同时后面的第二个层在移动过程中也看得见）直到出现... 在一个框中有两个重叠的层（默认状态下只显示第一个，层的大小和框一样），两侧各有一个按钮，点击左边的按钮时第一个层向左移动（同时后面的第二个层在移动过程中也看得见）直到出现第二层为止（期间移动的那个层不会再框外显示），然后点击右边那个按钮时同上（移动第二个层）
大概就这么多了，各位懂JS的大哥大姐以及高手们帮个忙吧，小生在这有礼了，非常感谢~~
回答的好的话再追加十分！！~~~ 展开

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

大猫和小耗子
推荐于2016-03-05 · TA获得超过206个赞

知道答主

回答量：131

采纳率：0%

帮助的人：147万

我也去答题访问个人页

关注

展开全部

我做了一个demo，你看行不，下面是简要代码，把div层中内容替换即可
------------
<html>
<head>
</head>
<style type="text/css">

</style>
<body>
    <span style='float:left;'><input type='button' id='btn1' value='第一个按钮' onclick='moveLeft();'/></span>
   <div id='parent' style='background:#FFF;border:1px solid #000;width:400px;height:400px;position:relative;float:left;overflow:hidden'>
      <div id='test1' style='position:absolute;left:0;top:0;width:400px;height:400px;background:gray;z-index:10;'>div_1</div>
      <div id='test2' style='position:absolute;left:0;top:0;width:400px;height:400px;background:yellow;z-index:9;'>div_2</div>
    </div>
   <span style='float:left;'><input type='button' id='btn1' value='第二个按钮' onclick='moveRight();'/></span>
</body>
</html>
<script type='text/javascript'>
var distance=0;
  var moveLeft=function(){
     distance=0;
     var obj1=document.getElementById('test1');
     var width=obj1.offsetWidth;
     moveLeft.obj=obj1;
     moveLeft.interval=setInterval('move(-1,'+width+')',100);
}
var moveRight=function()
{
    distance=0;
    var obj2=document.getElementById('test2');
    var width=obj2.offsetWidth;
    moveRight.obj=obj2;
     moveRight.interval=setInterval('move(1,'+width+')',100);
}
function move(dir,width)
{
    if(distance<width)
    {
        distance+=4;
        if(dir==-1)
        moveLeft.obj.style.left=parseInt(moveLeft.obj.style.left)+distance*dir+'px';
        else if(dir==1)
        moveRight.obj.style.left=parseInt(moveRight.obj.style.left)+distance*dir+'px';
    }
    else if(distance>width)
    {     if(dir==-1)
             clearInterval(moveLeft.interval);
          else
              clearInterval(moveRight.interval);
   }
}
</script>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

用JS做个div图层的移动

其他类似问题

为你推荐：