<!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. Arduino入门笔记【1】

    刚刚接触这个东西只知道这是类似于单片机的开发板,可以做一些单片机实现或者不能实现的东西,但是比单片机要简单得多. Arduino到底是什么? 维基百科上的描述是:Arduino是一块开发板的微控制器和 ...

  2. TFS二次开发、C#知识点、SQL知识总结目录

    TFS二次开发系列 TFS二次开发系列:一.TFS体系结构和概念 TFS二次开发系列:二.TFS的安装 TFS二次开发系列:三.TFS二次开发的第一个实例 TFS二次开发系列:四.TFS二次开发Wor ...

  3. android线程登录

    主入口代码: package com.tp.soft.app; import java.io.IOException; import java.util.HashMap; import java.ut ...

  4. C语言多文件编译

    fun.c #include <stdio.h> int fun1(){ printf("The first function!\n"); return 0; } in ...

  5. iOS - WXPay 微信支付

    1.微信支付申请 微信支付官方集成指引 微信支付官方集成指导视频 微信 APP 支付开发者文档 微信公众平台 微信开放平台 微信商户平台 1.1 微信 APP 支付申请步骤 APP 支付:APP 支付 ...

  6. Deep Learning 26：读论文“Maxout Networks”——ICML 2013

    论文Maxout Networks实际上非常简单,只是发现一种新的激活函数(叫maxout)而已,跟relu有点类似,relu使用的max(x,0)是对每个通道的特征图的每一个单元执行的与0比较最大化 ...

  7. JQuery_表单选择器

    表单作为HTML 中一种特殊的元素,操作方法较为多样性和特殊性 开发者不但可以使用之前的常规选择器或过滤器,也可以使用jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素. 一.常规选择器 ...

  8. python 中字典实用操作

    1.字典转化为列表 a={"username":"12","password":"89"} print a.items( ...

  9. Contiki-一个进程的例子

    进程调度器 进程调度器的作用是调用进程.进程调度器通过调用实现进程线程的函数来调用进程.Contiki中所有的进程被设计为响应传递到进程中的事件,或者相应进程请求的轮询.进程调度器在调度进程的时候会将 ...

  10. error CS0117: `UnityEditor.EditorUtility' does not contain a definition for `GetAssetPreview'

    have to replace: EditorUtility by AssetPreview