<!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. php将数据写入另外一个文件

    有时候,为了验证PHP的运行过程或者了解代码中的变量的使用情况,需要将变量写到另外一个文件中,方便我们查看.最近也是经常用到file_put_contents这个函数,因为只是试验用,暂时还不需要考虑 ...

  2. PAT 1014 Waiting in Line (模拟)

    Suppose a bank has N windows open for service. There is a yellow line in front of the windows which ...

  3. radhat 6.7修改mac地址方法

    vi ifcfg-eth0 #HW……,即注释掉原硬件地址. 再自己照着原地址写:MACADDR="新mac地址" 重启

  4. oracle 11g快捷版的安装与使用

    oracle 11g快捷版的安装与使用 [oracle 11g 下载地址(]https://www.oracle.com/technetwork/cn/database/enterprise-edit ...

  5. Ethereum Learning Materials

    Home 注:本页为 EthFans 站内文章精选集.鉴于文章的采集范围较广,我们无法保证文章内容没有重复,也不能保证排列的顺序实现了最优的认识路径.我们只能说,这些文章是我们精挑细选后,确认可以长期 ...

  6. 【PAT甲级】1086 Tree Traversals Again (25 分)（树知二求一）

    题意:输入一个正整数N(<=30),接着输入2*N行表示栈的出入(入栈顺序表示了二叉搜索树的先序序列,出栈顺序表示了二叉搜索树的中序序列),输出后序序列. AAAAAccepted code: ...

  7. 分布式系统(二) --SOA 以及一些网络通信协议TCP/UDP SYN攻击

    SOA(面向服务的架构):Service Oriented Architecture面向服务的架构.也就是把工程拆分成服务层.表现层两个工程.服务层中包含业务逻辑,只需要对外提供服务即可.表现层只需要 ...

  8. webpack 中使用 autoprefixer

    webpack中autoprefixer是配合postcss-loader使用的,首先安装相应资源: npm i -D style-loader css-loader postcss-loader a ...

  9. go开发工具goclipse的安装

    (1) 安装Eclipse 建议下载Eclipse时直接下载"Eclipse IDE for Java Developers"的package,而不要下载较小的Installer. ...

  10. stl_string复习

    #include <iostream>#include <string>#include <algorithm>using namespace std; void ...