<!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>

    <title>拖拽 碰撞+重力运动</title>

    <style>

        #div1

        {

            width:100px;

            height:100px;

            background:red;

            position:absolute;

        }

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var oDiv = document.getElementById("div1");

            var lastX = 0;

            var lastY =0;

            oDiv.onmousedown = function(ev){

                var en = ev || event;

                var disX = en.clientX - oDiv.offsetLeft;

                var disY = en.clientY - oDiv.offsetTop;

                document.onmousemove = function(ev){

                    var e = ev || event;

                    var l = e.clientX - disX;

                    var t = e.clientY - disY;

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

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

                    speedX = l - lastX;

                    speedY = t - lastY;

                }

               document.onmouseup = function(){

                    document.onmousemove = null;

                    document.onmouseup = null;

                    //开始运动

                    move();

               }

               //关闭定时器

               clearInterval(timer);

            }

        }

         //碰撞+重力 运动（计算空气阻力）

        var timer = null;

        //横向初速度

        var speedX = 0;

        //竖向初速度速度

        var speedY = 0;

        function move(){

            clearInterval(timer);

            timer = setInterval(function(){

                var oDiv = document.getElementById("div1");

                //类似重力加速度 : g = 3;

                //竖向加速度:3

                speedY+=3;

                var l = oDiv.offsetLeft + speedX ;

                var t = oDiv.offsetTop + speedY;

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

                {

                    //竖向空气阻力

                    speedY*=-0.8;

                    //横向空气阻力

                    speedX*=0.8;

                    //将top设置为(document.documentElement.clientHeight - oDiv.offsetHeight)px

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

                }

                else if(t<=0)

                {

                    //竖向空气阻力

                    speedY*=-0.8;

                    //横向空气阻力

                    speedX*=0.8;

                    //将top设置为0px

                    t=0;

                }

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

                {

                    //横向空气阻力

                    speedX*=-0.8;

                    //将left设置为(document.documentElement.clientWidth - oDiv.offsetWidth)px

                    l = document.documentElement.clientWidth - oDiv.offsetWidth;

                }

                else if(l<=0)

                {

                    //横向空气阻力

                    speedX*=-0.8;

                    //将left设置为0px

                    l = 0;

                }

                //将横向速度设置为0

                if(Math.abs(speedX)<1)

                {

                    speedX = 0;

                }

                //将竖向速度设置为0

                if(Math.abs(speedY)<1)

                {

                    speedY = 0;

                }

                //关闭定时器

                //横、竖速度都为空及物体距顶部高度为(可视窗口高度 - 物体高度)

                if(speedX==0 && speedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)

                {

                    clearInterval(timer);

                }

                else

                {

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

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

                }           

            },30);

        }

    </script>

</head>

<body>

   <div id="div1">

    </div>

    <span style="width:1px;height:300px;background:black;left:300px"></span>

</body>

</html>

js 拖拽 碰撞 + 重力 运动的更多相关文章

  1. js 碰撞 + 重力 运动

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

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. js拖拽效果

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

  6. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  7. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  8. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  9. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

随机推荐

  1. Nginx HTTP 过滤addition模块(响应前后追加数据)

    --with-http_addition_module 需要编译进Nginx 其功能主要在响应前或响应后追加内容 add_before_body 指令 将处理给定子请求后返回的文本添加到响应正文之前 ...

  2. 认真学习Linux系统让你真的有收获

    学习,最重要的是有一个认真的态度,熟话说,读书可以改变命运,以前觉得并不一定是这样,其实经历的多了才知道,事实确实如此.试想一个不会写字看书的人,他的生活该有多么无聊.读书容易,但读好书并不总是件容易 ...

  3. BZOJ4377[POI2015]Kurs szybkiego czytania——数学思维题

    题目描述 给定n,a,b,p,其中n,a互质.定义一个长度为n的01串c[0..n-1],其中c[i]==0当且仅当(ai+b) mod n < p.给定一个长为m的小01串,求出小串在大串中出 ...

  4. bzoj 3224: Tyvj 1728 普通平衡树 && loj 104 普通平衡树 （splay树）

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3224 思路: splay树模板题: 推荐博客:https://blog.csdn.ne ...

  5. python3网络爬虫（2.1）：爬取堆糖美女

    额,明明记得昨晚存了草稿箱,一觉醒来没了,那就简写点(其实是具体怎么解释我也不太懂/xk,纯属个人理解,有错误还望指正) 环境: 版本:python3 IDE:pycharm2017.3.3 浏览器: ...

  6. MT【68】一边柯西一边舍弃

    求$\sqrt{x-5}+\sqrt{24-3x}$的最值. 通常考试时会考你求最大值,常见的方式有三角代换,这里给如下做法: 证明:$\sqrt{x-5}+\sqrt{24-3x}=\sqrt{x- ...

  7. hdu5306 Gorgeous Sequence

    hdu5306 Gorgeous Sequence 题目大意 ​ 给你一个序列,维护区间和,区间chkmin和区间最大值 数据范围 数据组数T,序列长度n,操作次数m $T = 100,\sum n ...

  8. JavaScript -- throw、try 和 catch

    try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 很想java哦. <!DOCTYPE html> <html> <head& ...

  9. 愚人节CDACMFinal

    这个啊,愚人节的ACM之赛,其实还是很有意思的.之前因为星期天不能休息还怨声载道,但真的打起来了就是觉得特别有意思. 我们队,最开始乱搞电脑,cmd都没有办法调用了,霎时间十分慌张(而且我过于慌张忘了 ...

  10. （转）Maven之自定义archetype生成项目骨架

    背景:最近在开发一个项目的基础构件,在以后项目的开发过程中可以直接使用该构件快速的生成项目骨架进行开发. 摘要:使用过Maven的人都知道maven中有许多功能都是通过插件来提供的,今天我们来说一下其 ...