<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<style>

    body{margin:0;padding:0;}

    div{width:100px;height:100px;background:red;position:absolute;left:0;top:30px;}

</style>

<script>

    var ispeedX = 0;

    var ispeedY = 0;

    window.onload = function(){

        var oBtn = document.getElementsByTagName('input')[0];

        var oDiv = document.getElementsByTagName('div')[0];

        oBtn.onclick = function(){

            elasticStartMove(oDiv);

        };

        var lastX = 0; /*拖的快就快碰撞，拖的慢就慢碰撞*/

        var lastY = 0;

        oDiv.onmousedown = function(ev){

            var ev = ev || event;

            var disX = ev.clientX-this.offsetLeft;

            var disY = ev.clientY-this.offsetTop;

            document.onmouseover = function(ev){

                var oEvent = ev || event;

                var l = oEvent.clientX-disX;

                var t = oEvent.clientY-disY;

                ispeedX = l-lastX;

                ispeedY = t-lastY;

                lastX = l;

                lastY = t;

                oDiv.style.left = l+'px';

                oDiv.style.top = t+'px';

            };

            document.onmouseup = function(){

                document.onmouseover = document.onmouseup = null;

                elasticStartMove(oDiv);

            };

        };

    };

    function elasticStartMove(obj){

        clearInterval(obj.timer);

        obj.timer = setInterval(function(){

            ispeedY += 3; /*受重力因素，越来越快，加上重力摩擦会变得越来越小*/

            var t =  obj.offsetTop+ispeedY;

            var l= obj.offsetLeft+ispeedX;

           // alert("obj.offsetTop:"+obj.offsetTop+"ispeedY:"+ispeedY+"t:"+t);

            if(t >= document.documentElement.clientHeight - obj.offsetHeight){

                ispeedY *= -0.8;/*重力因素,让速度越来越小，高度不会变*/

                   ispeedX *= 0.8;

                t = document.documentElement.clientHeight - obj.offsetHeight;

            }else if(t<=0){

                ispeedY *= -0.8;

                t = 0;

            }

            if(l >= document.documentElement.clientWidth - obj.offsetWidth){

                ispeedX *= -0.8;

                l = document.documentElement.clientWidth - obj.offsetWidth; //避免超出范围碰撞，出现滚动条

            }else if(l<=0){

                ispeedX *= -0.8;

                l = 0

            }

            /*如果isped为小数，会往回跑，300.3-300 299.5->299*/

            if(Math.abs(ispeedX) <1){

                ispeedX = 0;

            }

            if(Math.abs(ispeedY) <1){

                ispeedY = 0;

            }

            if(ispeedX ==0 && ispeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight ){

                 clearInterval(obj.timer);

            }else{

                obj.style.top = t+'px';

                obj.style.left = l+'px'; 

            }

        },30);

    }

</script>

</head>

<body>

    <input type='button' value='开始运动'/>

    <div></div>

</body>

</html>

js 碰撞+拖拽的更多相关文章

  1. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  2. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  3. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  4. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  5. 原生Js实现拖拽（适用于pc和移动端）

    效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. js 利用jquery.gridly.js实现拖拽并且排序

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

  7. js 实现拖拽排序

    <!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...

  8. jquery.dragsort.js 实现拖拽过程遇到的问题

    .在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...

  9. JS实现拖拽功能

    本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...

随机推荐

  1. PEAKS|NovoHMM|Nover|DeepNovo|MAYUPercolator|UniprotKB|Swiss-prot|Mascot|SEQUEST|X!Tandem|pFind|MaxQuant|Msconvert|PEPMASS|LC|

    质谱仪: 质谱分析法是先将大分子电离为带电粒子,按质核比分离,由质谱仪识别电信号得到质谱图. Top-down直接得到结果是蛋白. Bottom down使用shutgun方法得到结果是肽段. 由蛋白 ...

  2. android apk 文件反编译

    最近,自己坑逼的把一个android 项目修改版本的代码删除了.这个项目居然还没上传到源代码管理器.幸好还有apk文件,修改的代码也不多可以反编译一下. 1.下载 dex2jar  获取源码工具  地 ...

  3. 由生到死10个月！做App中的“二”有多难

    十月,原本是怀胎过程的喜悦时光,但这段个时光,如今却是绝大多数App从生到死的所有时间.在App市场表面形式一片大好,彻底主宰我们生活.工作.娱乐的当下,绝大多数用户只是在App海洋中只取一瓢饮,其他 ...

  4. eclipse、myeclipse使用常用的小技巧

    1.修改类名称上的@author  *** Preference----Java----Code Style----Code Templates----->Comments----->Ty ...

  5. Python字符串编码——Unicode

    ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是 ...

  6. 瑞士一苹果店内iPhone突然爆炸致7人入院，iPhone还值得买吗？

    与国产手机高歌猛进态势呈现"最萌发展差"的,是以三星.苹果为代表的海外手机厂商在过去一年的疲态.数据显示,2017年小米手机产量较2016年增长幅度达76%,OPPO和vivo则分 ...

  7. Autotestplat体验中心

    web端 移动端 可戳[阅读原文]进行体验

  8. Java里观察者模式(订阅发布模式)

    创建主题(Subject)接口 创建订阅者(Observer)接口 实现主题 实现观察者 测试 总结 在公司开发项目,如果碰到一些在特定条件下触发某些逻辑操作的功能的实现基本上都是用的定时器 比如用户 ...

  9. 自己动手用java写一个hashMap

    入坑java很多年了,现在总结一下自己学到的东西. 1.首先我们先来聊聊什么是HashMap? 什么是hash?hash用中文的说法就叫做“散列”,通俗的讲就是把任意长度的字符串输入,经过hash计算 ...

  10. Ubuntu18.04LTS安装docker报错：Command 'lsb_release' not found

    Ubuntu18.04LTS安装docker在执行sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/ ...