<!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. Xcode及obj-c的基础知识

    1, 从简单的例程来看基本语法: 下面的代码是通过OSX-Application-Command Line Tool生成的: #import <Foundation/Foundation.h&g ...

  2. bean找不到异常

    和这种的 原因: 这些都是因为bean注入的时候没有找个要注入的bean 解决办法: 1.查看dubbo文件中,暴露接口是否引入bean 2.如果有引入,查看引入路径和类是否存在.

  3. sql语句错误

    此错误一般有以下情况造成: 1.配置文件中SQL语句写的有问题 2.传参过程中没有找到sql对应的参数 解决方法: 1.检查sql语句 2.debug启动,查找与sql语句相对应的参数是否存在. 3. ...

  4. LBWE更新模式切换问题：缓存清理

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. VirtualBox虚拟机运行Ubuntu如何不卡

    VirtualBox虚拟机运行Ubuntu如何不卡 转自http://www.xuzefeng.com/post/85.html 上一篇文章<VirtualBox虚拟机安装Ubuntu详细教程& ...

  6. logback 配置详解（一）——logger、root

    1.根节点<configuration>包含的属性 scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文件 ...

  7. 读文章《Flexbox详解》笔记

    文章地址:Flexbox详解 属性摘抄: flex container : display: other values | flex | inline-flex; flex-direction: ro ...

  8. c# 邮件发送功能

    //统一由一个邮箱发送录用通知 string strfrom = "";//发件人邮箱地址 string strpow = "";//邮箱密码 string s ...

  9. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  10. (十二)select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET

    select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型,原型:int select(int maxfd,fd_set *rdset ...