弹出层

最新推荐文章于 2022-01-29 10:15:05 发布

不是我的货

最新推荐文章于 2022-01-29 10:15:05 发布

阅读量319

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/wym1581/article/details/45420983

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin:0;padding:0}
	body{font-size:14px;font-family:"微软雅黑";background:#141414;}
	#dragbox{width:440px;height:300px;background:#fff;left:150px;top:150px;position:absolute;}
	#title{height:40px;background:#e5e5e5;line-height:40px;padding-left:5px;cursor:move}
  </style>
 </head>
 <body>
	
	<div id="dragbox">
		<div id="title" draggable="off">我是一个弹出层 </div>
	</div>
	
	<span id="box" style="left:100px;top:100px;poition:absolute;"></span>

	<script type="text/javascript">
		

		function init(){
			//1：首先要获取title的对象
			var titleDom = document.getElementById("title");
			var boxDom = document.getElementById("dragbox");
			//鼠标按下事件
			var left=0,top=0,x=0,y=0;
			var mark = false;
			titleDom.onmousedown = function(e){
				var ev = e || window.event;
				//获取当前鼠标按下去的坐标
				x = ev.clientX;
				y = ev.clientY;
				//获取元素的left和top的位置
				left = boxDom.offsetLeft;
				top = boxDom.offsetTop;
				mark = true;
			};
			//鼠标移动事件
			titleDom.onmousemove = function(e){
				if(mark){
					var ev = e || window.event;
					var x3 = ev.clientX;
					var y3 = ev.clientY;
					var newTop =  top + y3 - y;
					var newLeft = left + x3 - x;
					if(newTop<=0)newTop=1;
					if(newLeft<=0)newLeft=1;
					//重新定义元素的坐标
					boxDom.style.left = newLeft+"px";
					boxDom.style.top = newTop+"px";	
				}
			};
			
			//鼠标松开事件
			titleDom.onmouseup = function(){
				mark = false;
			};
		};
		init();
	</script>
 </body>
</html>
</span>

不是我的货

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出层

Document *{margin:0;padding:0} body{font-size:14px;font-family:"微软雅黑";background:#141414;} #dragbox{width:440px;height:300px;background:#fff;left:150px;top:150px;position:absolute;} #title{heig
复制链接

扫一扫