没有 JQuery 的 Javascript 滑出面板

标签 javascript

例如:http://www.building58.com/examples/tabSlideOut.html (点击右边的联系按钮)

我希望在我的网站上有这个功能,但我不想在 mit.js 中添加大量的 javascript。所以我的问题是:是否有任何简单的 javascript 可以做到这一点?

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

感谢您的回复

最佳答案

我写了一个带有滑动面板的小例子:

<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 参数来操纵滑动动画。

关于没有 JQuery 的 Javascript 滑出面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6161256/

相关文章:

JavaScript onClick 添加类

javascript - 用用户数据替换动态插入的关键字 Angular 5

javascript - 如何在 AlaSQL 中创建时间字段

javascript - 如何使 iframe 分辨率响应以完全适应它所在的 iframe?

javascript - material-ui 中的排版和间距

javascript - 重新创建媒体的图像缩放

javascript - 在类中声明对象类型

javascript - 函数在 Chrome/Safari 中有效,但在 Firefox 中无效

javascript - 为什么这段 JavaScript 代码在 Internet Explorer 中不起作用?

javascript encodeURIComponent 并将空格转换为 + 符号