js 浮动窗效果

来源:互联网 发布:建筑平面设计软件 编辑:程序博客网 时间:2024/05/11 06:17

源代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function over(){var btn = document.getElementsByTagName('button')[0]; var flt = document.getElementsByTagName('span')[0];var x = btn.offsetLeft +45 + 'px'; var y = btn.offsetTop  -10 + 'px'; flt.style.top = y; flt.style.left = x; flt.style.display = 'block'}function out(){var flt = document.getElementsByTagName('span')[0]; flt.style.display = 'none'; }</script> </head> <body> <button id="btn" style="position: absolute;" onmouseout="out()" onmouseover="over()">Click</button>  <span style="display: none;position: absolute;"> +1</span> </body> </html> </html> 

效果展示:


0 0
原创粉丝点击