JS点击出现悬浮窗效果

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用
    <!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>  


标签: isp

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:JavaScript收藏功能实现

下一篇:javascript检测元素是否支持某个属性代码