onmousedown活用之碰撞效果

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         #div {
 9             width: 100px;
10             height: 100px;
11             background: pink;
12             position: absolute;
13             top: 50px;
14             left: 60px;
15             cursor: pointer;
16         }
17         
18         #div1 {
19             width: 100px;
20             height: 100px;
21             border: 1px solid black;
22             position: absolute;
23             top: 300px;
24             left: 100px;
25         }
26         
27         #div2 {
28             width: 100px;
29             height: 100px;
30             border: 1px solid blue;
31             position: absolute;
32             top: 200px;
33             left: 600px;
34         }
35     </style>
36 </head>
37 
38 <body>
39     <div id="div"></div>
40     <div id="div1"></div>
41     <div id="div2"></div>
42     
43 </body>
44 
45 </html>

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

 1 <script type="text/javascript">
 2         var Div = document.getElementById("div");
 3         var Div1 = document.getElementById("div1");
 4         var Div2 = document.getElementById("div2");
 5 
 6         //第一个固定框的上下左右的值
 7         var top1 = parseInt(getStyle(div1, "top"));
 8         var bottom1 = parseInt(getStyle(div1, "top")) + 100;
 9         var left1 = parseInt(getStyle(div1, "left"));
10         var right1 = parseInt(getStyle(div1, "left")) + 100;
11 
12         //第二个固定框的上下左右的值
13         var top2 = parseInt(getStyle(div2, "top"));
14         var bottom2 = parseInt(getStyle(div2, "top")) + 100;
15         var left2 = parseInt(getStyle(div2, "left"));
16         var right2 = parseInt(getStyle(div2, "left")) + 100;
17         //alert(top1);
18         var red1 = "blue";
19         var red2 = "red";
20 
21         Div.onmousedown = function(ev) {
22             var o = event || ev;
23             //获取到鼠标点击的位置距离div左侧和顶部边框的距离
24             oX = o.clientX - parseInt(getStyle(Div, "left"));
25             oY = o.clientY - parseInt(getStyle(Div, "top"));
26             //当鼠标移动,把鼠标的偏移量给div
27             document.onmousemove = function(ev) {
28                 var o = event || ev;
29                 //计算出鼠标在XY方向上移动的偏移量,把这个偏移量加给DIV的左边距和上边距,div就会跟着移动
30                 Div.style.left = o.clientX - oX + "px";
31                 Div.style.top = o.clientY - oY + "px";
32 
33                 var left = parseInt(getStyle(div, "left"));
34                 var right = parseInt(getStyle(div, "left")) + 100;
35                 var top = parseInt(getStyle(div, "top"));
36                 var bottom = parseInt(getStyle(div, "top")) + 100;
37 
38 
39                 //第鼠标框的bottom值小于第二个框的top1值
40                 //第鼠标框的left值大于第二个框的right1值
41                 //第鼠标框的top值大于第二个框的bottom1值
42                 //第鼠标框的right值小于第二个框的left1值
43                 //当这些都满足的时候,说明第鼠标框没有触碰第二个框,所以背景色不变
44                 //否则,就是触动框了,背景色变
45                 if (bottom < top1 || left > right1 || top > bottom1 || right < left1) {
46                     Div1.style.background = "";
47                 } else {
48                     Div1.style.background = red1;
49                 }
50 
51                 if (bottom < top2 || left > right2 || top > bottom2 || right < left2) {
52                     Div2.style.background = "";
53                 } else {
54                     Div2.style.background = red2;
55                 }
56 
57             }
58 
59 
60             //当鼠标按键抬起,清除移动事件
61             document.onmouseup = function() {
62                 document.onmousedown = null;
63                 document.onmousemove = null;
64             }
65 
66         }
67 
68         //获取属性的数值
69         function getStyle(obj, attr) {
70             if (obj.currentStyle) {
71                 //currentStyle获取样式的值,对应的是ie浏览器
72                 return obj.currentStyle[attr];
73             } else {
74                 //同理,对应的是其他浏览器
75                 return getComputedStyle(obj, false)[attr];
76             }
77         }
78     </script>

 

转载于:https://www.cnblogs.com/WhiteM/p/6089055.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python判断密码强度_python – 检查密码的强度(如何检查条件)

你好最好的方法是使用正则表达式搜索这是我目前使用的功能def password_check(password):"""Verify the strength of passwordReturns a dict indicating the wrong criteriaA password is considered strong if:8 characters length or more1 digit or more1 s…

java 实现微博,QQ联合登录

详见&#xff1a;http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt313 开发平台 http://connect.qq.com/ http://open.weibo.com/ 可以下载相应的sdk 和 API Java代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748…

python启动多个进程_Python程序中的进程操作--—--开启多进程

Python程序中的进程操作--—--开启多进程之前我们已经了解了很多进程相关的理论知识&#xff0c;了解进程是什么应该不再困难了&#xff0c;刚刚我们已经了解了&#xff0c;运行中的程序就是一个进程。所有的进程都是通过它的父进程来创建的。因此&#xff0c;运行起来的python…

Angular JS (2)

通过Angular JS的官方教学文档&#xff0c;了解 routeProvider 的用法&#xff0c; angular.module(aaa).config([$locationProvider,$routeProvider, funtion config($locationProvider, $routeProvider){ app.config.js ---- angular. module(phonecatApp). config([$locat…

python多线程logger_python多线程logger_Dblogger:一个Python语言实现支持多进程和多线程日志打印高效Python日志库......

日期作者版本备注2020-12-7dingbinv1.0Dblogger: a powerful Python library supporting multi process and multi thread printing logsDblogger project implements a both multi-threads-safe and multi-process-safe logger library named dblogger in python language. It…

BIEE 目录迁移(文件夹)方式

文件夹迁移方式一&#xff08;归档--取消归档&#xff09;&#xff1a; 归档&#xff1a;analytics中选择目录&#xff0c;定位至指定文件夹&#xff0c;更多中选择归档&#xff0c;保存为 .catalog文档&#xff1b; 释放归档&#xff1a; 进入目录管理器&#xff0c;离…

unityscrollview生成大量_superscrollviewforUGUI的一些使用心得

接触这个插件也有差不多半年了&#xff0c;这段时间都是跟这个插件做的UI打交道&#xff0c;所以记一下相关的使用心得做备忘。这个插件主要由三个脚本构成&#xff0c;分别是ListItemData(挂载在要展示的物体预制体身上的&#xff0c;物体对应的属性&#xff0c;初始化字段等均…

使用的组件:ckeditor

老牌Web文本编辑器&#xff0c;无需多言。 官网地址&#xff1a;http://ckeditor.com/转载于:https://www.cnblogs.com/xusweeter/p/6098942.html

mybatis 配置 mysql连接池_spring 5.x 系列第5篇 —— 整合 mybatis + druid 连接池 (xml配置方式)...

项目目录结构1. 导入依赖创建 maven 工程&#xff0c;除了 Spring 的基本依赖外&#xff0c;还需要导入 Mybatis 和 Druid 的相关依赖&#xff1a;org.springframeworkgroupId>spring-jdbcartifactId>${spring-base-version}version>dependency>mysqlgroupId>my…

noi题库(noi.openjudge.cn) 1.8编程基础之多维数组T21——T25

T21 二维数组右上左下遍历 描述 给定一个row行col列的整数数组array&#xff0c;要求从array[0][0]元素开始&#xff0c;按从左上到右下的对角线顺序遍历整个数组。 输入 输入的第一行上有两个整数&#xff0c;依次为row和col。余下有row行&#xff0c;每行包含col个整数&#…

mysql memcache redis_redis,mysql,memcache的區別與比較,redis兩種數據存儲持久化方式

redis與mysql比較區別&#xff1a;mysql中一個中小型的網絡數據庫&#xff0c;比oracle和sqlserver小&#xff0c; 但是並發能力遠超過acess這樣的桌面數據庫&#xff1b;redis是一個內存鍵值數據庫&#xff0c;支持網絡、可基於內存亦可持久化的日志型、Key-Value數據庫。redi…

Java学习笔记三——数据类型

前言 Java是强类型&#xff08;strongly typed&#xff09;语言&#xff0c;强类型包含两方面的含义&#xff1a; 所有的变量必须先声明后使用&#xff1b;指定类型的变量只能接受预支匹配的值。这意味着每一个变量和表达式都有一个在编译时就确定的类型。 Java数据类型分为两大…

word可以直接导入mysql嘛_如何把word文档导入到数据库中——java POI

本文方法借鉴于https://www.cnblogs.com/ljysy/p/10574197.html在经过朋友的指导下&#xff0c;在处理文档的方式上有所不同。我的数据库使用的是SQL server&#xff0c;这篇博客将不介绍如何将数据存储进数据库中&#xff0c;只进行java POI处理文档数据的介绍&#xff0c;在处…

metinfo mysql off_利用Sqlmap测试MetInfo企业网站管理系统MySql注入

上次叉叉讲了Sqlmap简单注入(access数据库)教程&#xff0c;这次咱说说MySql数据库MetInfo&#xff0c;是一款强大的企业网站管理系统&#xff0c;采用PHPMysql架构。叉叉下载的是MetInfo 5.1.5的免费版本&#xff0c;咱不是大拿&#xff0c;不会分析源码&#xff0c;直接丢到W…

IOS的七种手势

今天为大家介绍一下IOS 的七种手势&#xff0c;手势在开发中经常用到&#xff0c;所以就简单 通俗易懂的说下&#xff0c; 话不多说&#xff0c;直接看代码&#xff1a; // 初始化一个UIimageViewUIImageView *imageView [[UIImageView alloc]initWithFrame:CGRectMake(100, 1…

mysql获取后一天_mysql获取当前时间,前一天,后一天

今天是2016年08月01日。date_sub(2016-08-01,interval 1 day) 表示 2016-07-31date_sub(2016-08-01,interval 0 day) 表示 2016-08-01date_sub(2016-08-01,interval -1 day) 表示 2016-08-02date_sub(curdate(),interval 1 day) 表示 2016-07-31date_sub(curdate(),interval -1…

c++获取sqlite3数据库表中所有字段的方法

常用方法&#xff1a; 1.使用sqlite3_get_table函数 2.获取sqlite创建表的sql语句字符串&#xff0c;然后进行解析获取到相应的字段 3.采用配置文件的方式&#xff0c;将所有字段名写入配置文件 方法1&#xff1a;使用sqlite3_get_table函数 代码&#xff1a; char *dbname “…

python sql语句生成_python Django 生成sql语句

class TestModel(models.Model):Namemodels.CharField(max_length64,blankTrue)>>> from django.core.management.color import no_style#Style是用来输出语句时着色的>>> from django.db import connection>>> from django.db.backends import cre…

Oozie的架构

Oozie的架构图&#xff0c;如下&#xff1a; 从oozie的架构图中&#xff0c;可以看到所有的任务都是通过oozie生成相应的任务客户端&#xff0c;并通过任务客户端来提交相应的任务。 继续。。。 转载于:https://www.cnblogs.com/zlslch/p/6117705.html

mysql如何做计划任务_简单的mysql 过程计划任务

首先讲讲过程是什么东西, 过程差不多就是SQL用的java之于方法.把一段sql做成过程后一个简单的调用就可以批量执行这些sql,很方便.其实就像java后台写个执行复杂sql的方法,你只是把这段sql存到数据库里了而已.mysql里面有"过程"和"函数"两个概念, 基本上前者…