返回顶部

收藏

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. 博主 发表 2017-11-05 11:42:25 原生 Javascript 编写五子棋
  2. 博主 发表 2017-11-01 15:24:51 原生 Javascript 编写俄罗斯方块
  3. 博主 发表 2017-09-28 01:50:55 jQuery 性能优化技巧
  4. 博主 发表 2017-11-05 11:42:39 原生 Javascript 编写贪吃蛇
  5. darida 发表 2018-03-25 14:51:31 文件预览 kkFileView v1.1 新增多媒体预览支持等
  6. Jiavan 发表 2016-03-05 12:06:00 ES中理解原型以及对象创建方式
  7. Jiavan 发表 2016-03-18 08:58:00 Javascript模块化编程及编写加载遵循AMD规范的代码
  8. Jiavan 发表 2016-03-24 12:11:00 JS事件分层及性能优化
  9. Jiavan 发表 2016-04-03 18:22:00 浅析JS中的自定义事件
  10. Jiavan 发表 2016-08-21 08:43:00 浅谈Flux架构及Redux实践
  11. Jiavan 发表 2016-08-26 03:26:00 Redux中间件与异步Action
  12. zIz.Me 发表 2015-10-07 11:37:00 JS随机彩票效果

发表评论