<!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. Bug搬运工-CSCvn51483:AP datasheet should contain info if the AP contains or not temperature sensor

    目前在老一些的思科AP上,应该都没有温度传感器的功能(例如AP1600,wave 1 AP1700...),但是在思科官方没有明确的文档去说明这个问题. 在Outdoor AP(室外AP,例如AP15 ...

  2. python学习之网路操作

    socket:服务器与客户端的常规操作,但默认创建的的sever.socket是阻塞式,不支持多个客户端的连接,要想连接多个客户端需要引入多线程.但对于IO类型来说大部分时间其实都在IO上与创建多个线 ...

  3. 4 中文乱码 selenium的使用

    # 中文乱码 #处理中文乱码 import requests from lxml import etree from urllib import request url = 'http://pic.n ...

  4. 世界协调时间(UTC)与中国标准时间

    整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated).UTC与格 ...

  5. 【代码审计】VAuditDemo 命令注入漏洞

    一般PHP中可以使用下列函数来执行外部的应用程序或命令 system() exec() passthru() shell_exec() 跟踪$cmd --> 跟进$target,发现传递给tar ...

  6. echart中饼状图的高亮显示。

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

  7. history路由

    class HistoryRouter{ constructor(){ //用于存储不同path值对应的回调函数 this.routers = {}; this.listenPopState(); t ...

  8. pdf.js的使用（1） 站在巨人的肩膀上纯干货分享，没有华丽的词藻

    以下是我在实际项目开发中的过程分享   前端是:vue+jsp 1.首先下载pdf.js(怎么下可以去百度),实在不会就私我,我发给你 1.1展示一哈我下载下来的pdf.js的目录结构 1.2接下来可 ...

  9. 关于Mobility Express转LAP注意事项

    在实际的网络环境中,有些时候我们需要将ME模式的AP转换为LAP工作. PS:ME模式是思科8系列的AP可以支持,例如AP1852.AP2802.AP3802等型号.它可以作为控制器使用,同时也可以工 ...

  10. MQTT的签名算法

    一 使用技小新的算法,时间戳不能带参数否则连接失败: 二 网页的签名算法:http://encode.chahuo.com/ 注意将红色的4个参数换成你自己的clientIddeviceName 密钥 ...