js css 动态悬浮窗怎么做？

2012-07-25 10:13:35 1.7k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

BankingRegulatorLLM 墨衍会员 · AI 创作全网分发关注 + 加入社区

2021-01-07【Web作业开发记录】悬浮窗功能 1.需求分析当鼠标放在一个窗口上面的时候，出现一个悬浮窗，提示商品的具体信息。 2.设计一开始的时候一脸懵逼，之后借鉴了steam的做法。在需要显示悬浮窗范围的div下，新建一个div儿子节点，即为悬浮窗的div。这个div的position设为absolute，初始display设为none，通过js动态获得位置和内容后，设置top，left属性，写入内容后，再将display设为block（下面直接采用了jquery的fadeIn函数，原理功能是一样的，只不过有个淡入的效果）。 3.代码 html部阅读详情

现在有一个table，在当鼠标移到table的每个td单元格的时候，就会出现一个悬浮窗，悬浮窗口中显示的内容是会发一个url请求去后台取数据的，请求一下这样要求的悬浮效果的源码，有的朋友情帮忙提供一下吧。谢谢了

...全文

Overlay技术全解析：从CSS到OpenCV与Android悬浮窗实战覆盖层（Overlay）是计算机视觉、Web前端与移动端开发中不可或缺的基础能力，也是当下“overlay相机”类应用背后的核心支撑。从图形渲染的图层组织方式到像素级alpha混合，从空间坐标与层级关系到时间维度的帧序列合成，Overlay技术贯穿了平面设计、实时视频处理与系统级交互。在Web端，可通过CSS定位与z-index实现相机取景框、网格线与半透明遮罩；在图像处理中，可借助OpenCV的透明通道混合完成水印、贴纸与LOGO合成；在移动端，则能利用Android WindowManager构建系统级阅读详情

BankingRegulatorLLM

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

pop68315 2014-04-18

打赏
举报

很是需要这个非常感谢。

牛仔不肥 2013-09-22

打赏
举报

liumin_0705 2013-03-27

打赏
举报

$('td').hover(function(e){ var tar = e.target || e.srcElement; ajax({ url:'', ... success:function(data){ var popudiv; if($('#popu_div').size()==0){ popudiv = $('<div id="popudiv"></div>').appendTo('body');//不存在则创建了放到body中 }else{ popudiv = $('#popu_div'); }//创建popudiv，如果已存在则不创建 popudiv.html(data);//设置内容 popudiv.css('position','absolute');//设置position var taroff = tar.offset(),width = tar.width(),height=tar.height; var pos = {//定位popudiv，这里以在td右边显示为例子，左边跟上边的时候还要计算popudiv的尺寸 top : taroff.top, left : taroff.left + width } popudiv.css(pos).show();//设置left，top，并显示出来 } }) },function(){ $('#popu_div').hide();//鼠标离开TD，popudiv隐藏 });

海麦藤 2013-03-27

打赏
举报

functionsub 2013-03-26

打赏
举报

其实很简单，就是单元格添加mouseover事件，发送ajax请求，请求成功以后 1.获取到这个单元格的offsetX与offsetY 2.再算出这个单元格的width跟height 3.再创建一个div，设置position:absolute，并添加到body里面去 4.然后把要显示的内容放进去（因为要是放在左边或者上面的话还要计算这个DIV填充内容后的尺寸，所以先放内容） 5.定位这个div，如果要显示在单元格右边就设置这个div的top=offsetY,left=offsetX+width。其他方向自己算一下就可以了用jquery代码简单的写一下就是这样的：


          $('td').hover(function(e){
            var tar = e.target || e.srcElement;
            ajax({
                url:'',
                ...
                success:function(data){
                    var popudiv;
                    if($('#popu_div').size()==0){
                        popudiv = $('<div id="popudiv"></div>').appendTo('body');//不存在则创建了放到body中
                    }else{
                        popudiv = $('#popu_div');
                    }//创建popudiv，如果已存在则不创建
                    popudiv.html(data);//设置内容
                    popudiv.css('position','absolute');//设置position
                    var taroff = tar.offset(),width = tar.width(),height=tar.height;
                    var pos = {//定位popudiv，这里以在td右边显示为例子，左边跟上边的时候还要计算popudiv的尺寸
                        top : taroff.top,
                        left : taroff.left + width
                    }
                    popudiv.css(pos).show();//设置left，top，并显示出来
                }
            })
          },function(){
            $('#popu_div').hide();//鼠标离开TD，popudiv隐藏
          });

bacy001 2013-03-26

打赏
举报

http://www.bacysoft.cn/thread-76-1-1.html 这里有一个悬浮的案例，但是你说的动态，我没理解是什么意思！？

001007009 2012-07-25

打赏
举报

给楼主推荐一个 Dialog

http://www.planeart.cn/demo/artDialog/_doc/new.html

你要的效果就是 mouseover 时触发ajax，然后 Dialog显示出来

js css 动态悬浮窗 怎么做？

相关推荐

js css 动态悬浮窗怎么做？