<!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. yum安装命令的使用方法

    yum安装常用软件的命令 #yum check-update #yum remove 软件包名 #yum install 软件包名 #yum update 软件包名 yum命令常见使用方法 yum - ...

  2. 微信小程序-基础内容组件

    icon 图标 示例: <view class="group"> <block wx:for="{{iconSize}}"> <i ...

  3. slideDoor（学习某编程网站的，仅作记录和学习）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Lucene 简单API使用

    本demo 简单模拟实现一个图书搜索功能. 模拟向数据库添加数据的时候,添加书籍索引. 提供搜索接口,支持按照书名,作者,内容进行搜索. 按默认规则排序返回搜索结果. Jar依赖: <prope ...

  5. RealSense开发-搭建C#开发环境

    一.前言 RealSense的开发环境主要包括如下几部分: 硬件:RealSense摄像头(此处以SR300为例)+搭载Intel酷睿6代处理器的PC机(其实4代处理器也能跑起来): 软件:Windo ...

  6. 给博客添加Flash时钟

    依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs ...

  7. 平衡二叉树AVL

    1.定义 平衡二叉树(Balanced Binary Tree)是二叉查找树的一个改进,也是第一个引入平衡概念的二叉树.1962年,G.M. Adelson-Velsky 和 E.M. Landis发 ...

  8. centos 开机启动服务

    一.启动脚本 /etc/rc.local 启动 最简单的一种方式,在启动脚本 /etc/rc.local (其实 /etc/rc.local 是/etc/rc.d/rc.local 的软链接文件,实际 ...

  9. Mensa Intellect test

      国际标准智商测试                             (智力测试) 例题: 第一:看似简单的加法乘法数学题,10个人有9个都不会做. 第二:问号处应该填写什么数字?10个人有8 ...

  10. Python常用内置函数总结

    一.数学相关 1.绝对值:abs(-1)2.最大最小值:max([1,2,3]).min([1,2,3])3.序列长度:len('abc').len([1,2,3]).len((1,2,3))4.取模 ...