<!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 type="text/css">

 img{ width:200px; height:200px; position:absolute;}

 .box{ width: 5px; height: 5px; background: #000; position: absolute; display: none;}

 </style>

 <script type="text/javascript">

 window.onload = function(){

     var oPic = document.getElementById("pic");

     var iSpeedX = 0;　　//定义在X方向上的速度

     var iSpeedY = 0;　　//定义在Y方向上的速度

     var timer = null;

     oPic.style.width = 0;

     oPic.style.height = 0;

     var beginX = document.documentElement.clientWidth /2;　　//获取可视区在X方向上的中心点

     var beginY = document.documentElement.clientHeight /2;　　//获取可视区在Y方向上的中心点

     oPic.style.left = beginX + "px";　　//初始化oPic的left值

     oPic.style.top = beginY + "px";　　//初始化oPic的Top值

     console.log(beginX + " , " + beginY);

     toChange(200);

     function toChange(iTraget){

         timer = setInterval(function (){

             if(oPic.offsetWidth == iTraget){

                 clearInterval(timer);

                 startMove();

             }else{//加载时显示oPic

                 oPic.style.width = oPic.offsetWidth + 10 + "px";

                 oPic.style.height = oPic.offsetHeight + 10 +"px";

                 oPic.style.left = beginX - oPic.offsetWidth /2 + "px";

                 oPic.style.top = beginY - oPic.offsetHeight /2 +"px";

             }

         },30);

     }

     oPic.onmousedown = function(ev){

         var oEvent = ev || event;

         var disX = oEvent.clientX - oPic.offsetLeft;　　//获取鼠标按下时在X方向上的的坐标位置

         var disY = oEvent.clientY - oPic.offsetTop;　　//获取鼠标按下时在Y方向上的坐标位置

         var preX = oEvent.clientX;　　//计算速度的第一个点-X

         var preY = oEvent.clientY;　　//计算速度的第一个点-Y

         clearInterval(timer);

         document.onmousemove = function (ev){

             var oEvent = ev || event;

             iSpeedX = oEvent.clientX - preX;　　//速度-X

             iSpeedY = oEvent.clientY - preY;　　//速度-Y

             preX = oEvent.clientX;

             preY = oEvent.clientY;

             var l = oEvent.clientX - disX;　　//鼠标拖动时的坐标-X

             var t = oEvent.clientY - disY;　　//鼠标拖动时的坐标-Y

 　　　　　　　//拖动时通过DOM来创建DIV计算速度

             var oBox = document.createElement("div");

             oBox.className = "box";

             oBox.style.left = oEvent.clientX + "px";

             oBox.style.top = oEvent.clientY + "px";

             document.body.appendChild(oBox);

             oPic.style.left = l + "px";　　//拖动时oPic的left或top值

             oPic.style.top = t + "px";

             //document.title = l + "," +t + "," + iSpeedX + "," + iSpeedY;

         }

         document.onmouseup = function (){

             document.onmousemove = null;

             startMove();　　//回弹

         }

         return false;

     }

     function startMove(){

         clearInterval(timer);

         timer = setInterval(function (ev){

             iSpeedY +=3;

             var L = oPic.offsetLeft + iSpeedX;

             var T = oPic.offsetTop + iSpeedY;

             if(L < 0){

                 L = 0;

                 iSpeedX *= -1;

                 iSpeedX *=0.75;

             }else if(L > document.documentElement.clientWidth - oPic.offsetWidth){

                 L= document.documentElement.clientWidth - oPic.offsetWidth;

                 iSpeedX *= -1;

                 iSpeedX *=0.75;

             }

             if(T < 0){

                 T = 0;

                 iSpeedY *=-1;

                 iSpeedY *=0.75;

             }else if(T > document.documentElement.clientHeight - oPic.offsetHeight){

                 T = document.documentElement.clientHeight - oPic.offsetHeight;

                 iSpeedY *=-1;

                 iSpeedY *=0.75;

                 iSpeedX *=0.75;

             }

             oPic.style.left = L + "px";

             oPic.style.top = T + "px";

             console.log(L + " , " + T + " , " + iSpeedX + " , " + iSpeedY);

         },30)

     }

 }

 </script>

 </head>

 <body>

 <img src="f.jpg" id="pic">

 </body>

 </html>
  • 有时候发现会有很多难点，有时候又发现没有难点。
  • 各种坐标的获取。
  • 根据坐标来计算各种值（比如：速度大小）
  • 边界值的判断
  • 速度*一个小数（0.nn）摩擦力

JS回弹原理-高级的更多相关文章

  1. JS垂直落体回弹原理

    /* *JS垂直落体回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. JS简单回弹原理

    /* *JS简单回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. Immutable.js 实现原理

    Immutable.js 实现原理 Immutable collections for JavaScript v4.0.0-rc.12 released on Oct 31, 2018 https:/ ...

  4. js 深入原理讲解系列-Promise

    js 深入原理讲解系列-Promise 能看懂这一题你就掌握了 js Promise 的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? const ...

  5. js 深入原理讲解系列-事件循环

    js 深入原理讲解系列-事件循环 能看懂这一题你就掌握了 js 事件循环的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log(' ...

  6. js 深入原理讲解系列-currying function

    js 深入原理讲解系列-currying function 能看懂这一题你就掌握了 js 科里函数的核心原理 不要专业的术语,说人话,讲明白! Q: 实现 sum 函数使得以下表达式的值正确 cons ...

  7. js高级---js运行原理

    概述 浏览器组成可分两部分:Shell+内核.浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎.渲染引擎功能作用 渲染引擎,负责对网 ...

  8. 浅谈JS中的高级函数

    在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙 ...

  9. 谈谈JS中的高级函数

    博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...

随机推荐

  1. 用vscode写c/c++

    用vscode写c/c++ 1. 安装wsl windows下安装linux(ubuntu) 2. 打开设置 3. 输入run code 随便找一个地方粘贴,会出现一大段代码 4. 把c对应的代码修改 ...

  2. placeholder样式

    .mdwh_txtmod_tp_inpshad input::-webkit-input-placeholder { /* WebKit browsers */ color: #cccccc; } . ...

  3. C语言：从p所指字符串中找出ASCII码最大的字符，将其放在第一个位置上，并将该字符前的原字符向后顺序移动。-使字符串的前导*号不得多于n个，若多余n个，则删除多余的*号，

    //fun函数:从p所指字符串中找出ASCII码最大的字符,将其放在第一个位置上,并将该字符前的原字符向后顺序移动. #include <stdio.h> void fun( char * ...

  4. Git 安装配置及工作流程

    在使用Git前我们需要先安装 Git.Git 目前支持 Linux/Unix.Solaris.Mac和 Windows 平台上运行. Git 各平台安装包下载地址为:http://git-scm.co ...

  5. 4_2 刽子手游戏（UVa489）<自顶向下逐步求精法>

    Hangman Judge是一个猜英文单字的小游戏(在电子字典中常会看到),游戏规则如下:1.答案单字写在纸上(每个字元一张纸),并且被盖起来,玩家每次猜一个英文字元(letter).2.如果这个英文 ...

  6. 用python来更改windows开机密码

    今天教大家用python脚本来控制小伙伴们windows电脑的开机密码.没错就是神不知鬼不觉,用random()随机生成的密码,只有你自己知道哦~ 代码呢分两部分,一部分是client端跟server ...

  7. ZOJ4104 Sequence in the Pocket(2019浙江省赛）

    思维~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; int b[maxn]; int N; int main ( ...

  8. 15. 深入解析Pod对象（二）：使用进阶

    15. 深入解析Pod对象(二):使用进阶 15.1 Projected Volume,投射数据卷 备注:Projected Volume 是 Kubernetes v1.11 之后的新特性 在 Ku ...

  9. springboot @Select @Insert @Update @Delete

    https://blog.csdn.net/qq_20867981/article/details/80641353 使用@Select.@Insert.@Update.@Delete注解代替xxxM ...

  10. Codeforces Round #620 (Div. 2) C. Air Conditioner

    Gildong owns a bulgogi restaurant. The restaurant has a lot of customers, so many of them like to ma ...