1

我对javascript相当陌生。我已经改编了一些脚本，我发现它可以做一些类似于我需要的事情，但它也不能像我想要的那样工作。我为冗长的解释道歉。

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

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

单击按钮#1 时，div#1 从左侧滑出，然后从容器左侧定位到它自己的宽度。这对于对应于 button#2 和 button#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>
4

1 回答 1

1

jsfiddle.net/KFqvf

这是一个我认为你想要的jsfiddle。只需要简单的jquery动画功能来左右滑动，以及一个简单的菜单来选择项目！

希望这可以帮助

于 2012-06-14T18:40:34.737 回答