<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<meta name="keywords" content="div移动">

<title>div移动</title>

</head>

<body>

    <div id="div" style="width:200px; position:absolute; height:200px; background-color:#F90; "></div>			<!-- 做一个div   0.0 -->

</body>

</html>

<script type="text/javascript">

	var div = document.getElementById('div');

	document.onmousedown = function(e)		//鼠标点击事件

	{

		e = e || window.event;

		var tops = document.getElementById('div').offsetTop;		//div四个角的坐标（200可变动）

		var lefts = document.getElementById('div').offsetLeft;

		var rights = lefts+200;

		var bottoms = tops+200;

		var mousex = e.pageX || e.clientX;			//点击时的鼠标位置

		var mousey = e.pagey || e.clientY;

		var topz = document.getElementById('div').getBoundingClientRect().top;		//获取div的左上位置

		var leftz = document.getElementById('div').getBoundingClientRect().left;

		if((mousex > lefts && mousex < rights)&&(mousey > tops && mousey < bottoms))

		{		//判断鼠标点击时是否在div中

			document.onmousemove = function(e)		//鼠标滑动事件

			{

				var mousexx = e.pageX || e.clientX;			//获取实时鼠标位置

				var mouseyy = e.pagey || e.clientY;

				var xx = mousexx - mousex;					//求移动的距离

				var yy = mouseyy - mousey;

				leftzz = leftz + xx;

				topzz = topz + yy;

				div.style.left = leftzz +"px";				//对div的左上角进行计算，与鼠标移动的距离相同

				div.style.top = topzz +"px";

			}

		}

	}

	document.onmouseup = function(){		//鼠标抬起将滑动事件解除

		document.onmousemove = null;

	}

</script>

　　

js初学者的div移动的更多相关文章

  1. js 键盘移动div、img对象

    js 键盘移动div.img对象 <html> <script type="text/javascript"> var EXtype="" ...

  2. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  3. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  4. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  5. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  6. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  7. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  8. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  9. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. _beginthreadex注意事项

    _beginthreadex 当失败时返回0 而不是 -1L _beginthreadex调用之后返回的HANDLE,必须手动CloseHandle,才能正确释放句柄.

  2. 从C++到GO

    从C++到GO 刚开始接触Go语言,看了两本Go语言的书,从c++开发者的角度来看看go语言的新特性,说下自己感触较深的几点: 并发编程 Go语言层面支持协程,将并发业务逻辑从异步转为同步,大幅提高开 ...

  3. jsp发布:Could not publish server configuration: null. java.lang.NullPointerException

    1.jsp发布: Could not publish server configuration: null. java.lang.NullPointerException

  4. 文件上传（excel服务端解析）

    1,html结构 <!-- 引入jQuery和jQuery.form.js插件 --><script type="text/javascript" src=&qu ...

  5. Redis教程(三) list类型

     一.概述: redis的list类型其实就是一个每个子元素都是string类型的双向链表.所以[lr]push和[lr]pop命令的算法时间复杂度都是O(1) 另外list会记录链表的长度.所以ll ...

  6. webpack 学习笔记

    1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...

  7. IIS7.0 Appcmd 命令详解和定时重启应用池及站点的设置

    IIS7.0 Appcmd 命令详解 废话不说!虽然有配置界面管理器!但是做安装包的时候命令创建是必不可少的!最近使用NSIS制作安装包仔细研究了一下Appcmd的命令,可谓是功能齐全. 上网查了些资 ...

  8. Deep Learning 23：dropout理解_之读论文“Improving neural networks by preventing co-adaptation of feature detectors”

    理论知识:Deep learning:四十一(Dropout简单理解).深度学习(二十二)Dropout浅层理解与实现.“Improving neural networks by preventing ...

  9. CMD 规范是不是就是 commonJS 规范？

    作者:giscafer链接:https://www.zhihu.com/question/20576942/answer/58094030来源:知乎著作权归作者所有,转载请联系作者获得授权. CMD是 ...

  10. spring-boot启动信息中non-fatal error

    java.lang.ClassNotFoundException: org.springframework.data.web.config.EnableSpringDataWebSupport缺少依赖 ...