返回顶部

收藏

JS点击出现悬浮窗效果

更多
    <!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>  

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象

发表评论