JS点击出现悬浮窗效果

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
        <title>Demo</title>  
        <script type="text/javascript">  
        window.onload = function(){  
            var btn = document.getElementsByTagName('button')[0];  
            var flt = document.getElementsByTagName('div')[0];  
            btn.onclick = function(){  
                event.cancelBubble = true;  
                var x = btn.offsetLeft - 15 + 'px';  
                var y = btn.offsetTop - 100 + 'px';  
                flt.style.top = y;  
                flt.style.left = x;  
                flt.style.display = 'block';  
            }         
            document.onclick = function(){  
                flt.style.display = 'none';  
            }  
        }  
      
        </script>  
        <style type="text/css">  
            *{  
                margin: 0px;  
                padding: 0px;  
            }  
            div{  
                width: 60px;  
                height: 100px;  
                background: #33ccff;  
                display: none;  
                position: absolute;  
            }  
      
            div ul{  
                text-align: center;  
            }  
      
            div li{  
                list-style-type: none;  
            }  
            button{  
                top: 300px;  
                left: 400px;  
                position: absolute;  
            }  
        </style>  
    </head>  
    <body>  
    <button id="btn">Click</button>  
    <div>  
        <ul id="nav">  
            <li class="item1"><a href="">Demo 1</a></li>  
            <li class="item2"><a href="">Demo 2</a></li>  
            <li class="item3"><a href="">Demo 3</a></li>  
            <li class="item4"><a href="">Demo 4</a></li>  
            <li class="item5"><a href="">Demo 5</a></li>  
        </ul>  
    </div>  
    </body>  
    </html>