简单侧边栏js效果

最新推荐文章于 2024-11-15 19:33:30 发布

辛苦的码农20200609

最新推荐文章于 2024-11-15 19:33:30 发布

阅读量304

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2jbci0ikjab.html

版权

前端专栏收录该内容

785 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>silder</title>
    <style>
        #slider{
            width: 300px;
            position: fixed;
            background-color: #cccccc;
            top: 0;
            bottom: 0;
            right:-300px;
            transition: right 0.4s;
        }
        #bbb{
            text-align: right;
            float: left;
        }
    </style>
</head>
<body>
    <div id="slider"></div>
    <div id="bbb">show/hide</div>
    <script>
        function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
            if(obj.currentStyle){   //针对ie获取非行间样式
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];   //针对非ie
            };
        };
        var EventUtil={
            //根据情况分别使用dom2 || IE || dom0方式 来添加事件
            addHandler:function(ele,evet,handler){
                if(ele.addEventListener){
                    ele.addEventListener(evet,handler,false);
                }else if(ele.attachEvent){
                    ele.attachEvent("on"+evet,handler);
                }else{
                    ele["on"+evet]=handler;
                }
            },
            //根据情况分别使用dom2 || IE || dom0方式 来删除事件
            removeHandler: function (ele, evet, handler) {
                if(ele.removeEventListener){
                    ele.removeEventListener(evet,handler,false);
                }else if(ele.detachEvent){
                    ele.detachEvent("on"+evet,handler);
                }else{
                    ele["on"+evet]=null;
                }
            }
        };
        var slider=document.getElementById("slider"),
            bbb=document.getElementById("bbb");
        EventUtil.addHandler(bbb,'mouseover',hand)
        EventUtil.addHandler(bbb,'mouseout',hand2)
        function hand(){
            slider.style.right='0';
        }
        function hand2(){
            slider.style.right= "-" + getStyle(slider,"width");
        }
    </script>
    <!--<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
　　　　//jqurey方法；
    <script>
        $(document).ready(function () {
            var bbb=$('#bbb');
            var slider=$('#slider');
            bbb.on('mouseenter', function () {
                slider.animate({right:0},500)
            })
            bbb.on('mouseleave', function () {
                slider.animate({right:-300},500)
            })
        })
    </script>-->
</body>
</html>