返回顶部

收藏

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. c君不在 发表 2017-12-14 07:32:57 浏览器端 async/await 还是有点代价的
  2. zee 发表 2017-12-14 04:50:35 前端热力图系统实现
  3. zee 发表 2017-12-14 04:50:35 前端热力图系统实现
  4. Liwen 发表 2011-11-10 19:17:53 如何检测浏览器和操作系统的信息
  5. kn007 发表 2017-12-12 12:51:13 博客采用新的HTML5视频播放器DPlayer Lite
  6. sunny5156 发表 2017-12-12 05:55:33 6 大主流 Web 框架优缺点对比
  7. Phodal Huang 发表 2017-12-11 13:54:51 Serverless 框架 OpenWhisk 开发指南:使用 Node.js 编写 hello,
  8. cc 发表 2013-04-26 02:02:33 jquery与discuz原型protype冲突解决方法
  9. cc 发表 2013-04-26 02:02:33 jquery与discuz原型protype冲突解决方法
  10. cc 发表 2015-03-23 02:39:03 [whatwg]html6无JavaScript单页应用程序
  11. w3cui 发表 2017-11-17 03:07:15 可视化编辑viewEdit.js
  12. ksc 发表 2014-03-23 09:02:40 商品SKU选择实现

发表评论