<!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. python 的集合

    set  的特点: 把不同的元素组合在一起,元素值必须是可哈希不可变的 set 的创建 s = set ('alex li') print(s) 表现形式:去重 {'e', 'i', ' ', 'l' ...

  2. react组件之间传值方式

    1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...

  3. 【IO多路复用】

    " 目录 一.IO模型介绍 二.阻塞IO(blocking IO) 三.非阻塞IO(non-blocking IO) 四.多路复用IO(IO multiplexing) 五.异步IO(Asy ...

  4. centos7 安装pip2和pip3

    linux pip2 安装cd /usr/bin yum install -y epel-release yum install -y python-pip _____________________ ...

  5. 聊聊面试中常问的GC机制

    GC 中文直译垃圾回收,是一种回收内存空间避免内存泄漏的机制.当 JVM 内存紧张,通过执行 GC 有效回收内存,转而分配给新对象从而实现内存的再利用. JVM GC 机制虽然无需开发主动参与,减轻不 ...

  6. Deeplearning.ai课程笔记-改善深层神经网络

    目录 一. 改善过拟合问题 Bias/Variance 正则化Regularization 1. L2 regularization 2. Dropout正则化 其他方法 1. 数据变形 2. Ear ...

  7. Hadoop _ 疑难杂症 解决1 - WARN util.NativeCodeLoader: Unable to load native-hadoop library for your plat

    最近博主在进行Hive测试 压缩解压缩的时候 遇到了这个问题, 该问题也常出现在日常 hdfs 指令中, 在启动服务 与 hdfs dfs 执行指令的时候 : 都会显示该提示,下面描述下该问题应该如何 ...

  8. Hibernate学习（六）

    Hibernate的三种查询方式 1.Criteria 查询 ,Query  By Criteria ( QBC )JPA 规范中定义的一种查询方法,但是不推荐使用 2.HQL : Hibernate ...

  9. Update(Stage4)：Spark Streaming原理_运行过程_高级特性

    Spark Streaming 导读 介绍 入门 原理 操作 Table of Contents 1. Spark Streaming 介绍 2. Spark Streaming 入门 2. 原理 3 ...

  10. 如何确认 fastboot unlock 解锁成功，如何确认DM-verity 已关闭

    如何确认 fastboot unlock 解锁成功 1.fastboot 模式下按音量上键后是否提示 Unlock Pass...return to fastboot in 3s 2.重启后界面是否显 ...