一个悬浮的DIV，实现鼠标拖动等功能

最新推荐文章于 2023-08-28 10:45:41 发布
最新推荐文章于 2023-08-28 10:45:41 发布
阅读量1.2k 收藏
点赞数
文章标签： div function scroll border iframe null

<html>
<head>
<title>_xWin</title>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
var xx;
//开始拖动;
function startDrag(obj)
{
        if(event.button==1)
        {
                //锁定标题栏;
                obj.setCapture();
                //定义对象;
                var win = obj.parentNode;
                var sha = win.nextSibling;
                //记录鼠标和层位置;
                x0 = event.clientX;
                y0 = event.clientY;
                x1 = parseInt(win.style.left);
                y1 = parseInt(win.style.top);
                //记录颜色;
                normal = obj.style.backgroundColor;
                //改变风格;
                obj.style.backgroundColor = hover;
                win.style.borderColor = hover;
                obj.nextSibling.style.color = hover;
                sha.style.left = x1 + offx;
                sha.style.top  = y1 + offy;
                moveable = true;
        }
}
//拖动;
function drag(obj)
{
        if(moveable)
        {
                var win = obj.parentNode;
                var sha = win.nextSibling;
                win.style.left = x1 + event.clientX - x0;
                                sha.style.left = parseInt(win.style.left) + offx;
                                if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){
                win.style.top  = y1 + event.clientY - y0;
                sha.style.top  = parseInt(win.style.top) + offy;
                }
        }
}
//停止拖动;
function stopDrag(obj)
{
        if(moveable)
        {
                var win = obj.parentNode;
                var sha = win.nextSibling;
                var msg = obj.nextSibling;
                win.style.borderColor     = normal;
                obj.style.backgroundColor = normal;
                msg.style.color           = normal;
                sha.style.left = obj.parentNode.style.left;
                sha.style.top  = obj.parentNode.style.top;
                obj.releaseCapture();
                moveable = false;
        }
}
//获得焦点;
function getFocus(obj)
{
        if(obj.style.zIndex!=index)
        {
                index = index + 2;
                var idx = index;
                obj.style.zIndex=idx;
                obj.nextSibling.style.zIndex=idx-1;
        }
}
//最小化;
function min(obj)
{
        var win = obj.parentNode.parentNode;
        var sha = win.nextSibling;
        var tit = obj.parentNode;
        var msg = tit.nextSibling;
        var flg = msg.style.display=="none";
        if(flg)
        {
                win.style.height  = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
                sha.style.height  = win.style.height;
                msg.style.display = "block";
                obj.innerHTML = "0";
        }
        else
        {
                win.style.height  = parseInt(tit.style.height) + 2*2;
                sha.style.height  = win.style.height;
                obj.innerHTML = "2";
                msg.style.display = "none";
        }
}
//关闭;
function cls(obj)
{
        var win = obj.parentNode.parentNode.parentNode;
        //var sha = win.nextSibling;
        win.style.visibility = "hidden";
        //sha.style.visibility = "hidden";
}
//显示/隐藏;
function ShowHide()
{
        if (xx!=null)
                        if (xx.style.visibility == "hidden")
                                xx.style.visibility = "visible";
                        else if (xx.style.visibility == "visible")
                                xx.style.visibility = "hidden";
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
        index = index+2;
        this.id      = id;
        this.width   = w;
        this.height  = h;
        this.left    = l;
        this.top     = t;
        this.zIndex  = index;
        this.title   = tit;
        this.message = msg;
        this.obj     = null;
        this.bulid   = bulid;
        this.bulid();
        xx = document.getElementById('allx');
        xx.style.visibility = "visible";

}
//初始化;
function bulid()
{
        var str = ""
                + "<div id='allx'><div id='xMsg'" + this.id + " "
                + "style='"
                + "z-index:" + this.zIndex + ";"
                + "width:" + this.width + ";"
                + "height:" + this.height + ";"
                + "left:" + this.left + ";"
                + "top:" + this.top + ";"
                + "background-color:" + normal + ";"
                + "color:" + normal + ";"
                + "font-size:11px;"
                + "font-family:Verdana;"
                + "position:absolute;"
                + "cursor:default;"
                + "border:2px solid " + normal + ";"
                + "' "
                + "οnmοusedοwn='getFocus(this)'>"
                        + "<div "
                        + "style='"
                        + "background-color:" + normal + ";"
                        + "width:" + (this.width) + ";"
                        + "height:20;"
                        + "color:white;"
                        + "' "
                        + "οnmοusedοwn='startDrag(this)' "
                        + "οnmοuseup='stopDrag(this)' "
                        + "οnmοusemοve='drag(this)' "
                        + "οndblclick='min(this.childNodes[1])'"
                        + ">"
                                + "<span style='width:" + (this.width-2*14) + ";padding-left:3px;'>" + this.title + "</span>"
                                + "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='min(this)'>0</span>"
                                + "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='cls(this)'>r</span>"
                        + "</div>"
                                + "<div style='"
                                + "width:100%;"
                                + "height:" + (this.height-20-4) + ";"
                                + "background-color:white;"
                                + "line-height:14px;"
                                + "word-break:break-all;"
                                + "padding:0px;"
                                + "'>" + this.message + "<iframe src='checkBox.html' width=460 scroll='no' style='border-width:0px'></iframe></div>"
                + "</div>"
                + "<div id='xshadow' style='"
                + "width:" + this.width + ";"
                + "height:" + this.height + ";"
                + "top:" + this.top + ";"
                + "left:" + this.left + ";"
                + "z-index:" + (this.zIndex-1) + ";"
                + "position:absolute;"
                + "background-color:black;"
                + "filter:alpha(opacity=40);"
                + "'>by wildwind</div></div>";
        document.getElementById('msgbox').innerHTML = str;
               
               
}
//-->
</script>

<script language='JScript'>
<!--
function initialize()
{
        var a = new xWin("0",460,400,200,200,"效果怎么样！","<br>aaaaaaaaaaaaaaaaaaaaaaaaa");

}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' οncοntextmenu='return false' scroll='no'>


<DIV class=textSheet
style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">

<table width="242" height="160" border="1" ID="Table2">

    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080"  onMouseMove="bgColor='#ffff99'" οnmοuseοut="bgColor='#FFFFFF'"

οnclick="ShowHide()">显示隐藏</td>
</table>
</DIV>
<div id="msgbox"></div>
</body>
</html>

 

rainVSjava
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动DIV悬浮框
weixin_39482360的博客
10-28 938
1、首先添加CSS样式 .ui-dialog{ width: 450px;height: 180px; z-index: 9000; border: 1px solid #D5D5D5;background: #fff; overflow-y: auto; } ...
HTML页悬浮div的两种方式
热门推荐
u012698249的博客
09-19 7万+
HTML页悬浮div的两种方式，类似固定在某个地方的形式和类似导航栏悬浮的形式，前者一直显示在屏幕上，后者可以再滚动时候再显示出来
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Golden的专栏
10-27 1420
<html> <head> <title>Js弹出浮动窗口，支持鼠标拖动和关闭</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /** 关于一些参数说明： *bodycontent:要在窗口显示的内容，dom对象 *title:窗口标题，字符串类型
创建可移动的悬浮DIV
wzq6511的专栏
09-30 1245
HTML代码如下： var divObj=null; var pX; var pY; document.onmousemove = divMove; document.onmouseup = divUp; function moveObj(obj){ divObj=document.all(obj); pX
jQuery_悬浮按钮控制页面滚动
学习记录
11-24 4294
悬浮按钮控制页面滚动 $(function(){ $("#downButton").click(function(){ wind
拖拽浮动层的效果实现
<font size=10><b>人为峰 </b></font>
08-12 806
    New Document            #layer1{ position:absolute; left:200px; top:200px;   border:#CCCCCC solid 1px;  width:100px;  height:100px;  cursor:pointer;  background-color:#251411;-moz-user-select:non
vue3+ant design vue实现一个1，可拖拽的悬浮框，2，框内有字幕滚动，鼠标悬停，字幕停止滚动，3，点击后可出现详情下拉框
zsm__zsm的博客
08-28 608
1，可拖拽的悬浮框，2，框内有字幕滚动，鼠标悬停，字幕停止滚动，3，点击后可出现详情下拉框
div可视化拖动 随着鼠标拖动div，可以自由拖动
zhh_5的博客
12-19 1047
div可视化拖动
html js设置div可拖动效果
weixin_40841731的博客
02-24 7983
第一种：先看代码，可直接复制使用。 这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。 问题：js设置div可拖动效果  当我在实际项目中使用时，div里有关闭div的按钮，很多时候点击按钮，关闭事件不触发，反而div会移动。因为该div是js动态生成了，我尝试使用阻止冒泡事件来解决这个问题，但是不起作用。于是换了另一种方式。如下第二种 &lt;!doctype html&gt;...
原生js 实现移动端 元素页面拖拽
qq_41851047的博客
08-19 894
html <div id="qmkf" > <div> 拖动</div> </div> css #qmkf { border-radius: 50%; position: fixed; z-index: 99; width: 39px; ...
jquery 可拖动浮动DIV ，可固定DIV
03-14
DIV可固定到页面的固定位置，不随页面的滚动而变化，还可以拖动DIV重新固定位置
CSS鼠标悬浮DIV后显示DIV外的按钮解决方法
12-12
昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。 效果如下： 问题： 在DIV hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要...
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
10-18
主要介绍了vue+mousemove实现鼠标拖动功能，文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下
jQuery实现div跟随鼠标移动
10-19
主要为大家详细介绍了jQuery实现div跟随鼠标移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 实现可任意拖动的悬浮窗功能(类似悬浮球）
08-19
主要介绍了Android 可任意拖动的悬浮窗(类似悬浮球）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
2024年神经酸行业分析报告.pptx
最新发布
04-18
2024年神经酸行业分析报告.pptx
css制作一个悬浮在浏览器上的可拖动挂件
05-31
要制作一个悬浮在浏览器上的可拖动挂件，需要用到CSS的position属性、z-index属性和JavaScript的drag事件。以下是一个简单的例子： HTML代码： ``` <div class="widget" draggable="true"> <p>这是一个可拖动挂件</p> </div> ``` CSS代码： ``` .widget { position: fixed; top: 50px; right: 50px; z-index: 9999; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 5px; } ``` JavaScript代码： ``` const widget = document.querySelector('.widget'); let isDragging = false; let lastX = 0; let lastY = 0; widget.addEventListener('mousedown', (e) => { lastX = e.clientX; lastY = e.clientY; isDragging = true; }); widget.addEventListener('mouseup', () => { isDragging = false; }); widget.addEventListener('mousemove', (e) => { if (isDragging) { const deltaX = e.clientX - lastX; const deltaY = e.clientY - lastY; const newX = parseInt(widget.style.right) - deltaX; const newY = parseInt(widget.style.top) + deltaY; widget.style.right = newX + 'px'; widget.style.top = newY + 'px'; lastX = e.clientX; lastY = e.clientY; } }); ``` 解释一下代码： - `draggable="true"` 属性使挂件可拖动。 - `mousedown` 事件监听鼠标按下事件，记录当前鼠标位置并将 `isDragging` 标志设为 true。 - `mouseup` 事件监听鼠标松开事件，将 `isDragging` 标志设为 false。 - `mousemove` 事件监听鼠标移动事件，当 `isDragging` 为 true 时，计算鼠标移动的距离，更新挂件的位置，并更新记录的鼠标位置。 这样就可以实现一个悬浮在浏览器上的可拖动挂件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值