IT虾米网

JS点击出现悬浮窗效果详解

itxm 2018年06月24日 编程语言 1001 0
    <!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>  


发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

网页右下方弹出提示框详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。