javascript - 同时将 div 滑入和滑出页面 View

Question

我是 javascript 的新手。我改编了一些我发现的脚本来做一些与我需要的类似的事情，但它并没有像我想要的那样工作。对于冗长的解释，我深表歉意。

我有 6 个按钮，按钮 1 -3 负责左侧的 div，按钮 4 - 6 负责右侧的 div。

当脚本运行时，所有 div 都不应可见。

当 buttons#1 被点击时，div#1 从左边滑出，然后从容器的左边定位到它自己的宽度。这与按钮#2和按钮#3对应的div#2和div#3相同。一次只能看到 1 个 div，因此 button#2 将隐藏 div#1 和 div#3 并显示 div#2，等等。所有其他按钮都相同。

当按钮#4 被点击时，div#4 从右侧滑出，并从容器右侧定位到自己的宽度。单击另一个按钮时隐藏div与上述相同，一次只能看到1个div。

帮助将不胜感激。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">




$(window).load(function(){

   $('.button-left').click(function() {
    var index = $(this).index(".button-left");
    var $box = $(".box-left:eq(" + index + ")");

    $(".box-left").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '25%',
        }, 500);
    }
});

    $('.button-right').click(function() {
    var index = $(this).index(".button-right");
    var $box = $(".box-right:eq(" + index + ")");

    $(".box-right").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '105%',
        }, 500);
    }
});
});




</script>
<style type="text/css">
#container {
    position: absolute;
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    width:1024px;
    height:568px;
    overflow: hidden;
    background-color:#999999;
}

.box-left {
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

.box-right {
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    top: 100px;
    margin-left: -25%;

}

#box1 {
    background-color: green;
    left:260px;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
    right:0px;
}

#box5 {
    background-color: purple;
}

#box6 {
    background-color: brown;
}
</style>



<div class="button-left"><a href="#">Click Box #1</a> </div>
<div class="button-left"><a href="#">Click Box #2</a> </div>
<div class="button-left"><a href="#">Click Box #3</a> </div>

<div class="button-right"><a href="#">Click Box #4</a> </div>
<div class="button-right"><a href="#">Click Box #5</a> </div>
<div class="button-right"><a href="#">Click Box #6</a> </div>


<div id="container">

    <div id="box1" class="box-left">Box #1</div>
    <div id="box2" class="box-left">Box #2</div>
    <div id="box3" class="box-left">Box #3</div>
    <div id="box4" class="box-right">Box #4</div>
    <div id="box5" class="box-right">Box #5</div>
    <div id="box6" class="box-right">Box #6</div>

</div>

Answer 1

jsfiddle.net/KFqvf

这是一个包含我认为您想要的内容的 jsfiddle。只需要简单的 jquery 动画功能来左右滑动，以及一个简单的菜单来选择元素!

希望对你有帮助