<!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. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...

  2. 深入理解IOC模式及Unity框架

    研究了下,有几篇博客确实已经说得很清楚了 1.IoC模式:http://www.cnblogs.com/qqlin/archive/2012/10/09/2707075.html  这篇博客是通过一个 ...

  3. maven 使用tomcat插件 自动化部署war

    1.相关环境变量 idea tomcat8 maven3 2.增加tomcat user, 修改 $CATALINA_HOME/conf/tomcat-users.xml <tomcat-use ...

  4. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  5. imadjust从用法到原理—Matlab灰度变换函数之一

    imadjust从用法到原理-Matlab灰度变换函数之一 转摘网址:http://blog.sina.com.cn/s/blog_14d1511ee0102ww6s.html imadjust函数是 ...

  6. maven中运行hibernate5的一些注意事项

    问题1:Could not bind factory to JNDI hibernate.cfg.xml中<sessionFactory> 标签中的name="foo" ...

  7. centos6.5下安装qq2012

    大家如果想在linux下用QQ的话,最好的方法就是用wine来安装.腾讯的QQ for linux用起来很坑爹. 下面就是我用wine在centOS下安装QQ.中间过程很简单. 一.安装Wine. 1 ...

  8. folder、source folder、package 区别与联系

    在eclipse下,package,source folder,folder都是文件夹.  它们的区别如下:  package:当你在建立一个package时,它自动建立到source folder下 ...

  9. JVM垃圾回收机制总结：调优方法

    转载: JVM垃圾回收机制总结:调优方法 JVM 优化经验总结 JVM 垃圾回收器工作原理及使用实例介绍

  10. yii2-basic后台管理功能开发之三：自定义GridView列显示

    在第二篇 yii2-basic后台管理功能开发之二:创建CRUD增删改查 中,我们利用gii工具生成的结果一般并不是我们想要的结果. 我们需要根据自己的需求自定义列显示.我遇到的主要是一下变更: 时间 ...