<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         #wrap{

             width: 100px;

             height: 100px;

             background-color: red;

             position: absolute;

             left: 0;

             top: 0;

             cursor: pointer;

             z-index: 2;

         }

         #obstacle{

             width: 200px;

             height: 200px;

             background-color: blue;

             position: absolute;

             left: 300px;

             top: 200px;

             z-index: 1;

         }

     </style>

 </head>

 <body>

     <div id="wrap"></div>

     <!-- 障碍物 -->

     <div id="obstacle"></div>

 </body>

 <script type="text/javascript">

     var wrap = document.querySelector("#wrap");

     var obstacle = document.querySelector("#obstacle");

     wrap.onmousedown = function(e){

         var e = e || window.event;

         //鼠标的坐标

         var oX = e.clientX;

         var oY = e.clientY;

         // 计算差值

         var differL = oX - wrap.offsetLeft;

         var differT = oY - wrap.offsetTop;

         document.onmousemove = function(e){

             var e = e || window.event;

             // 改变wrap的位置

             wrap.style.left = e.clientX - differL + "px";

             wrap.style.top = e.clientY - differT + "px";

             // 判断

             var wrapLeft = wrap.offsetLeft;

             var wrapTop = wrap.offsetTop;

             var wrapRight = wrapLeft + wrap.offsetWidth;

             var wrapBottom = wrapTop + wrap.offsetHeight;

             var obstacleLeft = obstacle.offsetLeft;

             var obstacleTop = obstacle.offsetTop;

             var obstacleRight = obstacleLeft + obstacle.offsetWidth;

             var obstacleBottom = obstacleTop + obstacle.offsetHeight;

             if(wrapLeft <= obstacleRight && wrapTop <= obstacleBottom && wrapRight >= obstacleLeft && wrapBottom >= obstacleTop){

                 wrap.style.backgroundColor = "yellow";

             }else{

                 wrap.style.backgroundColor = "red";

             }

         }

     }

     wrap.onmouseup = function(){

         document.onmousemove = null;

     }

 </script>

 </html>

用原生js写碰撞变色效果的更多相关文章

  1. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  2. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  3. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  4. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  5. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  8. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  9. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

随机推荐

  1. 红黑树（Red-Black tree）

    红黑树又称红-黑二叉树,它首先是一颗二叉树,它具体二叉树所有的特性.同时红黑树更是一颗自平衡的排序二叉树.我们知道一颗基本的二叉树他们都需要满足一个基本性质–即树中的任何节点的值大于它的左子节点,且小 ...

  2. 如何让input框自动获得焦点

    项目中有个需求  一个用扫描枪输入的input框 为了避免每次都需要人为点击 需要做成当打开页面时该input框自动获取焦点 <input type="text" name= ...

  3. 【HOW】SharePoint如何彻底删除用户

    在网站中打开“人员和组”,在选中某一用户后,一般只有“从用户组中删除用户”操作.此操作只能将此用户从此用户组中删除,却不能从网站集中彻底删除. 要将用户从网站集中彻底删除,可按如下步骤操作: 1. 在 ...

  4. Linux系统挂载数据盘

    参考:http://help.aliyun.com/knowledge_detail/5974154.html?spm=5176.788314850.3.2.hUqwXo 1.在阿里云上购买了服务器, ...

  5. NET映射导致的应用无法访问

    应用环境 IIS 数据库  oracle11G 服务器 windwos2003 企业版 周一早上刚到,听到业务部门的人反应,集团的扫码抢系统登陆不上了,没办法进行出入库操作,大批货物在仓库堆积,承运车 ...

  6. sax/dom/jdom/dom4j的区别

    sax/dom/jdom/dom4j的区别[转] 博客分类: xml   网上能够查到很多的4种解析方式的区别,我再做一下摘录和总结,顺带给自己做个备份. SAX sax分析器在对xml文档进行分析时 ...

  7. win7远程桌面恢复全屏状态快捷键

    不同的电脑可能有不同的快捷键(有些笔记本电脑甚至没有相应的键值):①台式机:ctrl+alt+break 组合键.②CTRL+ALT+PAGEDOWN 组合键.③有的笔记本没有break键,可以尝试加 ...

  8. 原生态ajax 传递json参数到服务器端

    案例说明:通过ajax将用户名和密码以json形式传递给服务器端,然后服务器端接受数据,进行处理返回json数据到前端 首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式.L ...

  9. SICP练习记录

    -------------求一个数的平方根(牛顿法平方根求解法): (define (sqrt-iter guess x) (if (good-enough? guess x) guess (sqrt ...

  10. Sublime插件安装

    来在Sublime text3上安装Package Control 使用Ctrl+`(ESC下边的那个~)快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: imp ...