通过绝对定位,在页面中随意位置设置两个div;

也就是说div 是拖动的框,div1和div2是被触碰的框;

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50px;
left: 60px;
cursor: pointer;
} #div1 {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top: 300px;
left: 100px;
} #div2 {
width: 100px;
height: 100px;
border: 1px solid blue;
position: absolute;
top: 200px;
left: 600px;
}
</style>
</head> <body>
<div id="div"></div>
<div id="div1"></div>
<div id="div2"></div> </body> </html>

所有的script是在写在body里面的,

 <script type="text/javascript">
var Div = document.getElementById("div");
var Div1 = document.getElementById("div1");
var Div2 = document.getElementById("div2"); //第一个固定框的上下左右的值
var top1 = parseInt(getStyle(div1, "top"));
var bottom1 = parseInt(getStyle(div1, "top")) + 100;
var left1 = parseInt(getStyle(div1, "left"));
var right1 = parseInt(getStyle(div1, "left")) + 100; //第二个固定框的上下左右的值
var top2 = parseInt(getStyle(div2, "top"));
var bottom2 = parseInt(getStyle(div2, "top")) + 100;
var left2 = parseInt(getStyle(div2, "left"));
var right2 = parseInt(getStyle(div2, "left")) + 100;
//alert(top1);
var red1 = "blue";
var red2 = "red"; Div.onmousedown = function(ev) {
var o = event || ev;
//获取到鼠标点击的位置距离div左侧和顶部边框的距离
oX = o.clientX - parseInt(getStyle(Div, "left"));
oY = o.clientY - parseInt(getStyle(Div, "top"));
//当鼠标移动,把鼠标的偏移量给div
document.onmousemove = function(ev) {
var o = event || ev;
//计算出鼠标在XY方向上移动的偏移量,把这个偏移量加给DIV的左边距和上边距,div就会跟着移动
Div.style.left = o.clientX - oX + "px";
Div.style.top = o.clientY - oY + "px"; var left = parseInt(getStyle(div, "left"));
var right = parseInt(getStyle(div, "left")) + 100;
var top = parseInt(getStyle(div, "top"));
var bottom = parseInt(getStyle(div, "top")) + 100; //第鼠标框的bottom值小于第二个框的top1值
//第鼠标框的left值大于第二个框的right1值
//第鼠标框的top值大于第二个框的bottom1值
//第鼠标框的right值小于第二个框的left1值
//当这些都满足的时候,说明第鼠标框没有触碰第二个框,所以背景色不变
//否则,就是触动框了,背景色变
if (bottom < top1 || left > right1 || top > bottom1 || right < left1) {
Div1.style.background = "";
} else {
Div1.style.background = red1;
} if (bottom < top2 || left > right2 || top > bottom2 || right < left2) {
Div2.style.background = "";
} else {
Div2.style.background = red2;
} } //当鼠标按键抬起,清除移动事件
document.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
} } //获取属性的数值
function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值,对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理,对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
</script>

onmousedown活用之碰撞效果的更多相关文章

  1. iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说

    UIKit Dynamic是iOS7 新增的一组类和方法.可赋予UIView逼真的行为和特征,不须要写动画效果那些繁琐的代码,让开发者可以轻松地改善应用的用户体验.一共同拥有6个可用于定制UIDyna ...

  2. 用Easing函数实现碰撞效果

    用Easing函数实现碰撞效果 工程中需要的源码请从这里下载: https://github.com/YouXianMing/EasingAnimation 源码: // // ViewControl ...

  3. iOS 力学动画生成器UIKit Dynamics 之碰撞效果讲解

    UIKit Dynamic是iOS7 新增的一组类和方法,可赋予UIView逼真的行为和特征,不需要写动画效果那些繁琐的代码,让开发人员能够轻松地改善应用的用户体验.一共有6个可用于定制UIDynam ...

  4. 拖拽碰撞效果,高级浏览器下全部搞定(ie6-8还没有搞定)

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. UIDynamic仿物理引擎-浮动碰撞效果-b

    最近产品提了个需求(电商的APP-两鲜),需要在APP背景加上几个水果图案在那里无规则缓慢游荡...模仿 天天果园 APP的.好吧,那我就在网上找了很多文章,总结一下写个demo.效果如下: Mou ...

  6. U3D 实现地面碰撞效果

    前面讲了如何让两个刚体碰撞: 现在来细细讲解一下, 首先,精灵刚体后就好比物理世界的物体,是受到重力所用的, 然后两个物体要添加碰撞系数才能实现碰撞, 这种情况下,碰撞后会使得另一个刚体也会随之运动, ...

  7. onmousedown活用之鼠标拖动

    这个布局蛮简单的就是一个div块,通过定位,固定位置 <html> <head> <meta charset="UTF-8"> <titl ...

  8. Unity之CharacterController 碰撞问题总结

    CharacterController 不会受到scene的重力影响,自带物理碰撞检测,在脱离导航网格的应用场景下(比如飞行),是很有优势的Unity原生工具组件.如果在复杂的应用场景里,会有多种CC ...

  9. [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起

    [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起 在上一篇里我给出了重制的坦克舰队效果图和试玩程序.本篇介绍一下玩家坦克和敌方坦克碰撞问题. +BIT祝威+悄悄在此留下版了个 ...

随机推荐

  1. USACO 3.2 Stringsobits

    StringsobitsKim Schrijvers Consider an ordered set S of strings of N (1 <= N <= 31) bits. Bits ...

  2. Laravel生成编译文件权限问题

    sudo -unobody ./artisan optimize # 避免`fpm`账户无权限修改缓存文件的问题.这里的`nobody`改成实际的`fpm`用户名.

  3. C# ExcelHelper

    using System; using System.IO; using System.Data; using System.Collections; using System.Data.OleDb; ...

  4. DFS - leetcode [深度优先遍历]

    最短路径=>BFS    所有路径=>DFS 126. Word Ladder II BFS+DFS: BFS找出下一个有效的word进队 并记录step 更新两个变量:unordered ...

  5. C# 去除文件和文件夹的只读属性

    当我们使用 DirectoryInfo dir = Directory.CreateDirectory(pathName) 创建目录或者创建一个文件后,有时作为临时文件用完以后需要删除掉,使用File ...

  6. 【Python之路】第七篇--Python基础之面向对象及相关

    面向对象基础 基础内容介绍详见一下两篇博文: 面向对象初级篇 面向对象进阶篇 其他相关 一.isinstance(obj, cls) 检查obj是否是类 cls 的对象 class Foo(objec ...

  7. Python学习之旅--第二周--python基础

    一.什么是pyc? 1.Python是解释性语言,那么.pyc是什么文件? 2.解释性语言和编译型语言区别:    计算机是不能够识别高级语言的,所以当我们运行一个高级别语言程序时,就需要一个&quo ...

  8. spring可以get到bean,注入却为空

    使用spring的时候,已经将要用的bean注入到容器之中却发现在程序中总是报null,后来发现是因为当前的启动类没有在容器之中,所以用上下文可以get到,但是注入却无效

  9. wso2 CEP集成storm实验

    1.三台机子:192.168.225.1(manager,nimbus), 192.168.225.2(worker,supervisor), 192.168.225.3(worker,supervi ...

  10. Linux下TFTP的安装,配置和操作

    注:转载他人,仅供自己研究学习使用 TFTP是用来下载远程文件的最简单网络协议,它其于UDP协议而实现.嵌入式linux的tftp开发环境包括两个方面:一是linux服务器端的tftp-server支 ...