JS點擊出現懸浮窗效果

jopen 9年前發布 | 6K 次閱讀 JavaScript 

    <!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>  </pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！