用js写一个可以拖拽的浮动窗口

最新推荐文章于 2023-04-07 16:52:49 发布
最新推荐文章于 2023-04-07 16:52:49 发布
阅读量2k 收藏
点赞数
分类专栏： Js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CNZYYH/article/details/51281120
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom3.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script language="javascript" type="text/javascript">
    	var x =0;
    	var y = 0;
    	var x1 =0;
    	var y1 = 0;
    	var moveable = false;
    	var index = 20000;
    	
  		function down(obj,evt){
  			e = evt?evt:window.event;
  			//通过这个来判断是IE还是FF  浏览器的兼容性问题
 // 			if(!window.captureEvents()){
  				obj.setCapture();
 // 			}else{
 // 				window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 // 			}
  			var win = obj.parentNode;//取得父窗口
  			x = e.clientX;//取得当前坐标的X坐标
  			y = e.clientY;//取得当前坐标的Y坐标
  			x1 = parseInt(win.style.left.substr(0,win.style.left.length-2));//将父窗体距离浏览器左边界的距离转换为number
  			y1 = parseInt(win.style.top.substr(0,win.style.top.length-2));//将父窗体距离浏览器左边界的距离转换为number
  			moveable= true;
  			
  		}
  		
  		function move(obj, evt){
  			e = evt?evt:window.event;
  			if(moveable){
  				var win = obj.parentNode;
  				win.style.left = x1 + e.clientX - x +"px";
  				win.style.top = y1 + e.clientY -y +"px";
  				
  			}
  		}
  		//停止拖动
  		function up(obj){
 // 			if(!window.captureEvents()){
  				obj.releaseCapture();
 // 			}else{
 // 				window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 // 			}
  			moveable= false;
  		}
    </script>

  </head>
  
  <body >
	<div style="width:400px;height:400px;top:100px;left:100px;background-color:red;position:absolute;">
		<div οnmοusedοwn="down(this,event)" οnmοusemοve="move(this,event)" οnmοuseup="up(this)"
		style="width:400px;height:100px;top:0px;left:0px;background-color:blue;position:absolute;font-size:30px;cursor:default">
		浮动窗口
		</div>
	</div>
  </body>
</html>

CNZYYH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQurey实现html浮动窗口的移动 拉伸效果
qq_42769197的博客
09-21 755
如果有需要的用户 ，可以直接拿去用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;main view&lt;/title&gt; &lt;style type="text/css"&gt; .bo
js实现悬浮窗效果(支持拖动)
10-20
本文主要介绍了js实现悬浮窗效果(支持拖动)的实例，具有很好的参考价值。下面跟着小编一起来看下吧
js实现悬浮可拖动登录窗口(demo)
10-23
dropDiv2.0是我在拖拽div例子的基础上改进的例子。相对于拖拽例子，这里增添了event浏览器兼容性处理、禁鼠标选中的一些机制。
html可以移动的浮动窗口
08-08
NULL 博文链接：https://hw1287789687.iteye.com/blog/2151517
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
12-10
本文实例讲述了JS实现可缩放、拖动、关闭和最小化的浮动窗口方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
js 实现手机端任意拖拽悬浮窗，在手机屏幕范围任意移动,始终居右显示
MisterMister的博客
08-02 1544
1.css: #demo{ border-radius: 1rem; position: fixed; height: 1rem; width: 1rem; right: 0; z-index: 999999; bottom: .35rem; text-align: center; font-size: 0; } 2.页面： 3.js代码： function initDialog(){ let ...
js浮动窗口代码
飞一龙的专栏
07-16 7362
                                                                                               var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4
可拖动的悬浮窗+对话框悬浮窗
01-17
可拖动的悬浮窗+对话框悬浮窗，相关博文：http://www.cnblogs.com/tianzhijiexian/p/3994546.html
CSS可拖动的圆角窗口
07-13
一个可以拖动的浮动块，边框为圆角，浮动位置不超越窗口边界
touchmover手机移动端的拖动
weixin_30535913的博客
09-08 120
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1...
js实现鼠标拖拽效果的HTML怎么写,js实现悬浮窗效果(支持拖动)
weixin_39690105的博客
06-03 448
经常可以看到大部分的官网有右侧悬浮在线客服。今天来写写！效果图：代码如下：js悬浮窗代码(支持拖动)*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}/* KeFuDiv */.KeFuDiv{position:absolute;height:160px;width:196px;background: #01C4C6;color:...
网页页面浮动窗口示例代码（JavaScript Code）
热门推荐
::: 移动互联网时代开发者 :::
01-16 3万+
      这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：            具体使用方法，看下面的这个完整的页面代码应该就知道了。//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=orange,
html5 窗口 最小化,JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例_ja
weixin_35696075的博客
05-30 786
本文实例讲述了JS实现可缩放、拖动、关闭和最小化的浮动窗口方法。分享给大家供大家参考。具体实现方法如下：代码如下:JS实现可缩放、拖动、关闭和最小化的浮动窗口var zindex=0 //全局变量function dragClass(name,title,content,left,top,width,height){var isMouseDown=false;var maximum=false;...
基于javascript的可拖拽悬浮框
在无知中学习，在学习中成长，在成长中学习
04-07 560
基于javascript的可拖拽悬浮框
JS制作DIV悬浮窗与悬浮窗拖拽
adsl4977的博客
03-14 731
　　 　　//-------------------------------------------------------------------这里只是吐槽！~------------------------------------------------------------------ 　　啊哈，这是第一次来博客园里写博客喃。当然也是我的第一篇博客啦= =！很有纪念意义。。...
如何在html添加悬浮页面,如何设置悬浮窗口?
weixin_33658509的博客
06-04 5737
可以用FlashMX来制作，下面是教程用FlashMX制作拖动悬浮窗口在课件制作过程中，有些需要重点突出的知识点要在单独的画面中显示，并且要求可以拖动。这就是我们平时所说的可以拖动的悬浮窗口。笔者以Flash MX为课件制作平台，将实现方法与大家共享。此方法只用到一个SWF文件，主场景和悬浮窗口都包含在同一个文件中。首先将悬浮窗口隐藏起来，当主场景中的按钮按下之后，把悬浮窗口显示出来，这样，就显示...
h5可拖动悬浮按钮_js实现悬浮窗效果(支持拖动)
weixin_39935571的博客
01-13 2100
经常可以看到大部分的官网有右侧悬浮在线客服。今天来写写！效果图：代码如下：js悬浮窗代码(支持拖动)*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}/* KeFuDiv */.KeFuDiv{position:absolute;height:160px;width:196px;background: #01C4C6;color:...
html弹出窗口是浮动,JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
最新发布
06-09
好的，下面是使用 JS 实现弹出浮动窗口的详细步骤： 1. HTML 结构 首先，我们需要在 HTML 中添加一个按钮，用于触发弹出浮动窗口的事件。同时，为了方便后续操作，我们需要在 HTML 中添加一个空的 div 元素，用于存放弹出浮动窗口的内容。 ```html <button id="open-btn">打开浮动窗口</button> <div id="float-window"></div> ``` 2. CSS 样式 接下来，我们需要为浮动窗口添加样式。这里我们使用绝对定位来实现浮动效果，同时添加一些基本的样式，如背景颜色、边框样式等。 ```css #float-window { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background-color: #fff; border: 1px solid #ccc; display: none; /* 默认隐藏 */ } ``` 3. JS 代码 最后，我们需要使用 JS 代码来实现弹出浮动窗口的功能。具体步骤如下： 1. 获取按钮元素和浮动窗口元素，并添加事件监听器。 ```javascript var openBtn = document.getElementById('open-btn'); var floatWindow = document.getElementById('float-window'); openBtn.addEventListener('click', function() { floatWindow.style.display = 'block'; }); ``` 2. 实现拖拽效果。 ```javascript var isDragging = false; // 是否正在拖动 var mouseOffset = { x: 0, y: 0 }; // 鼠标相对于浮动窗口的偏移量 floatWindow.addEventListener('mousedown', function(e) { isDragging = true; mouseOffset.x = e.pageX - floatWindow.offsetLeft; mouseOffset.y = e.pageY - floatWindow.offsetTop; }); document.addEventListener('mousemove', function(e) { if (isDragging) { floatWindow.style.left = e.pageX - mouseOffset.x + 'px'; floatWindow.style.top = e.pageY - mouseOffset.y + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); ``` 3. 实现关闭效果。 ```javascript var closeBtn = document.createElement('div'); closeBtn.innerHTML = '关闭'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '10px'; floatWindow.appendChild(closeBtn); closeBtn.addEventListener('click', function() { floatWindow.style.display = 'none'; }); ``` 最终的 JS 代码如下： ```javascript var openBtn = document.getElementById('open-btn'); var floatWindow = document.getElementById('float-window'); openBtn.addEventListener('click', function() { floatWindow.style.display = 'block'; }); var isDragging = false; // 是否正在拖动 var mouseOffset = { x: 0, y: 0 }; // 鼠标相对于浮动窗口的偏移量 floatWindow.addEventListener('mousedown', function(e) { isDragging = true; mouseOffset.x = e.pageX - floatWindow.offsetLeft; mouseOffset.y = e.pageY - floatWindow.offsetTop; }); document.addEventListener('mousemove', function(e) { if (isDragging) { floatWindow.style.left = e.pageX - mouseOffset.x + 'px'; floatWindow.style.top = e.pageY - mouseOffset.y + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); var closeBtn = document.createElement('div'); closeBtn.innerHTML = '关闭'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '10px'; floatWindow.appendChild(closeBtn); closeBtn.addEventListener('click', function() { floatWindow.style.display = 'none'; }); ``` 这样，我们就完成了使用 JS 实现弹出浮动窗口的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值