Question

这个幻灯片问题我有些问题。任何人都可以帮助将左侧面板更改为右侧面板吗？

我的代码：

<!DOCTYPE html>
<html>
<head>

    <style> 

.left, .hidden {
    float: left;
    height:350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:7%;
    z-index:2;
    position:absolute;
    left:-1000px;
    background:grey;
    color:#000;
}


.clear {
    clear:both;
}


    </style>


     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>


<div class="hidden">Show Me</div>
<div class="left">Left panel</div>

<div class="clear"></div>

<a href="#" id="slide">Show/hide Slide Panel</a>

    <script>

    $(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

    </script>

</body>
</html>

链接可以在这个Jsfiddle链接中看到：

http://jsfiddle.net/ZQTFq/

这个幻灯片问题我有些问题。任何人都可以帮助将左面板更改为右面板吗？我对此幻灯片问题有一些问题。任何人都可以帮助将左面板更改为右面板吗？我对此幻灯片问题有一些问题。任何人都可以帮助将左侧面板更改为右侧面板吗？

Answer 1

将所有css属性从“left”更改为“right”。在jQuery动画代码中执行相同的操作。

.left, .hidden {
    float: left;
    height:350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:25%;
    z-index:2;
    position:absolute;
    right:-1000px;
    background:#f90;
    color:#000;
}

.right {
    width:50%;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}

.clear {
    clear:both;
}

http://jsfiddle.net/ZQTFq/1763/

Answer 2

刚刚将宽度从25％更改为50％...您可以在以下fiddle中看到

以下是我更改的代码：

.hidden {
    width:50%;
    z-index:2;
    position:absolute;
    left:-1000px;
    background:#f90;
    color:#000;
}

如何从右向左滑动Jquery？

2 个答案: