Question

例如：http://www.building58.com/examples/tabSlideOut.html（点击右侧的“联系人”按钮）

我活着在我的网站上有这个功能，但我不想添加大量的JavaScript到mit。所以我的问题是：有没有简单的JavaScript来做到这一点？

我在这里找到了一个只使用CSS3 http://www.1stwebdesigner.com/tutorials/slide-out-panel-css3/的教程，但它显示了网站顶部的面板，当我想要它向左或向右时：D

感谢您的回复

Answer 1

我用滑动面板写了一个小例子：

<html>
    <head>
        <script type="text/javascript" >

        </script>

        <style type="text/css">
            #sliding_box {
                position:absolute;
                width:200px;
                height:200px;
                background-color: red;

                top:200px;
                left:0px;               
                -moz-transition: all 1s ease-in-out;
                -webkit-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;                 

                margin-left: -190px;            
            }                       

            #sliding_box:hover{

                margin-left: 0px;
            }

        </style>

    </head>

    <body>
        <div id="sliding_box">
            Sliding box
        </div>
    </body>
</html>

使用FF4和Chrome进行测试。您可以使用margin-left参数来操纵滑动动画。

Answer 2

问题是，没有简单的javascript可以做到这一点。如果你想要没有任何动画的弹出窗口，你可以为2个不同的类编写两个css样式，然后使用javascript“onclick”事件在它们之间切换。

如果你想要一个带有动画的好看的弹出窗口，我仍然建议你使用jQuery。在您的网站中包含该库很简单。并且有大量的jQuery插件，可以完全满足您的需求。当然你仍然可以编写自己的javascript函数来实现所需的效果，但jQuery是为那种东西编写的。

Javascript在没有JQuery的情况下滑出面板

2 个答案: