<!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. eclipse好用的快捷键

    eclipse一些增加工作效率的快捷键(部分自己添加) eclipse如何修改快捷键 1. shift + enter | ctrl + shift + enter 在下/上方增加空行 2. ctrl ...

  2. tp5 rewrite apache 配置

    emmmmm,本来还是nginx服务器,突然换成了apache ubuntu系统,apache2服务器,tp5, 1.首先还是运行phpinfo.php,搜一下“Loaded Modules”这里面是 ...

  3. hibernate并发时的事务处理

    两个方法 方法一: public void saveTest() { try { System.out.println("saveTest start"); User user = ...

  4. vue axios路由跳转取消所有请求 和 防止重复请求

    直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...

  5. Android学习02

    今天学了ScrollView&HorizontalScrollView和WebView 一.ScrollView(垂直滚动),HorizontalScrollView(水平滚动) Scroll ...

  6. PHP扩展安装之phpize

    phpize命令是准备php扩展安装的编译环境的.用于手动编译安装php扩展. 一般使用pecl来安装php扩展. 如果pecl没法安装,比如在防火墙后面,或要安装的扩展在pecl还没有兼容包.则使用 ...

  7. 微信HTTP公告

  8. android studio中project structure配置

    android studio project structure 1.project中填jdk路径 2.module中添androidsdk路径 3.sdks中填jdk路径

  9. 计算机二级-C语言-对二维数组数据进行处理。对文件进行数据输入。形参与实参。

    //函数fun的功能为:计算x所指数组中N个数的平均值(规定所有数都为正数),平均值通过形参返回给主函数,将小于平均值且最接近平均值的数作为函数值返回,并输出. //重难点:形参与实参之间,是否进行了 ...

  10. go语言快速入门教程

    go快速入门指南 by 小强,2019-06-13 go语言是目前非常火热的语言,广泛应用于服务器端,云计算,kubernetes容器编排等领域.它是一种开源的编译型程序设计语言,支持并发.垃圾回收机 ...