动画选卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>动画选卡</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #box1{width: 500px;height: 800px;background: pink;float:left;margin-right:20px;}
        #box2{width: 200px;height: 500px;background:red;float:left;display:none;}
    </style>
    <script type="text/javascript">
        $(function(){
            var box1=$("box1");
            var box2=$("box2");
            var timer=null;


            box1.onmouseover=show;
            box1.onmouseout=hide;

            box2.onmouseover=show;
            box2.onmouseout=hide;

            function show(){
                clearInterval(timer);
                box2.style.display="block";
            };
            function hide(){
                timer=setTimeout(function(){
                    box2.style.display="none";
                },300);
            };




            // box1.onmouseover=function(){
            //     box2.style.display="block";
            // };


            // box1.onmouseout=function(){
            //     box2.style.display="block";
            // };





        });



        function getStyle(obj,attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
        };


        function $(x){
            if(typeof x==="function"){
                window.onload=x;
            }else if(typeof x==="string"){
                return document.getElementById(x);
            }else if(typeof x==="object"){
                return x;
            }
        };
    </script>
</head>
<body>
    <div id="box1">11</div>
    <div id="box2">22222</div>
</body>
</html>

posted on 2017-04-24 15:56  37℃的冰  阅读(94)  评论(0)    收藏  举报

导航