js 浮动窗效果

不念不忘少年蓝@ 2023-10-16 22:04 12阅读 0赞

源代码：

<!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;" οnmοuseοut="out()" οnmοuseοver="over()">Click</button> 
     
    <span style="display: none;position: absolute;"> +1</span>
     
    </body> 
    </html> 
    </html>

效果展示：

![Center][]

[Center]: https://img-blog.csdn.net/20150810091809672?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 浮动窗效果

源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

不念不忘少年蓝@/ 2023年10月16日 22:04/ 0 赞/ 13 阅读

相关 vue飘窗效果（css飘窗效果，跟随页面滚动）

简述：飘窗效果，相信大家都见过，一般用于官网页面，下面给大家整理了下，飘窗效果在vue中的使用，效果图如下； ![bc01fa64861b47499b8c32269b08

妖狐艹你老母/ 2023年10月04日 22:03/ 0 赞/ 94 阅读

相关 div为空的时候浮动没有效果_浮动属性

![b1982da53c93d88fcb40df24937d4179.png][] 普通流（normal flow）说明前面我们提过，网页布局的核

梦里梦外;/ 2023年01月10日 10:19/ 0 赞/ 156 阅读

相关绘制浮动的效果_CSS躬行记（4）——浮动形状

　　CSS规范新增了一个模块：CSS Shapes，shape-outside属性属于该模块，它能影响浮动元素周边内容流的形状（即浮动形状），可接收三类值：形状盒子、函数和图像

逃离我推掉我的手/ 2023年01月06日 11:47/ 0 赞/ 208 阅读

相关 JS之清除浮动

1、给浮动的元素的祖先元素加高度没有清除浮动： ![Center][] ![Image 1][] ![Image 1][] 清除浮动： ![Center 1][] !

Bertha 。/ 2022年09月24日 13:24/ 0 赞/ 147 阅读

相关 js弹窗

js的三种最常见的对话框 \[javascript\] [view plain][][copy][view plain] 1. //==================

布满荆棘的人生/ 2022年06月10日 09:47/ 0 赞/ 363 阅读

相关 js面向对象（三）组件开发实现弹窗效果

组件开发：多组对象，像兄弟之间的关系（也是代码复用的一种形式）组件开发需要解决的问题：1、参数的顺序问题 2、参数不写报错的问题解决办法：主要就是通过设置默认参数和配

以你之姓@/ 2022年05月29日 09:40/ 0 赞/ 233 阅读

相关 easyUI dataGrid操作工具栏浮动效果

操作区域飘起来的css 要在easyui-datagrid上级div加上 form-page .form-page .datagrid .operation-button

男娘i/ 2022年04月18日 03:38/ 0 赞/ 320 阅读

相关 Android桌面悬浮窗效果实现，仿360手机卫士悬浮窗效果

大家好，今天给大家带来一个仿360手机卫士悬浮窗效果的教程，在开始之前请允许我说几句不相干的废话。不知不觉我发现自己接触Android已有近三个年头了，期间各种的成长少不了

女爷i/ 2022年01月05日 09:43/ 0 赞/ 483 阅读

相关 jQuery--窗体弹窗效果

前言内容显示效果： HTML代码： CSS代码： J

àì夳堔傛蜴生んèń/ 2021年09月27日 05:02/ 0 赞/ 511 阅读