1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>无标题文档</title>
  6.  <style type="text/css">
  7.  img{ width:200px; height:200px; position:absolute;}
  8.  .box{ width: 5px; height: 5px; background: #000; position: absolute; display: none;}
  9.  </style>
  10.  
  11.  <script type="text/javascript">
  12.  window.onload = function(){
  13.  
  14.      var oPic = document.getElementById("pic");
  15.      var iSpeedX = 0;　　//定义在X方向上的速度
  16.      var iSpeedY = 0;　　//定义在Y方向上的速度
  17.      var timer = null;
  18.  
  19.      oPic.style.width = 0;
  20.      oPic.style.height = 0;
  21.      var beginX = document.documentElement.clientWidth /2;　　//获取可视区在X方向上的中心点
  22.      var beginY = document.documentElement.clientHeight /2;　　//获取可视区在Y方向上的中心点
  23.      oPic.style.left = beginX + "px";　　//初始化oPic的left值
  24.      oPic.style.top = beginY + "px";　　//初始化oPic的Top值
  25.      console.log(beginX + " , " + beginY);
  26.  
  27.      toChange(200);
  28.  
  29.      function toChange(iTraget){
  30.          timer = setInterval(function (){
  31.              if(oPic.offsetWidth == iTraget){
  32.                  clearInterval(timer);
  33.                  startMove();
  34.              }else{//加载时显示oPic
  35.                  oPic.style.width = oPic.offsetWidth + 10 + "px";
  36.                  oPic.style.height = oPic.offsetHeight + 10 +"px";
  37.                  oPic.style.left = beginX - oPic.offsetWidth /2 + "px";
  38.                  oPic.style.top = beginY - oPic.offsetHeight /2 +"px";
  39.              }
  40.  
  41.          },30);
  42.  
  43.      }
  44.      oPic.onmousedown = function(ev){
  45.          var oEvent = ev || event;
  46.          var disX = oEvent.clientX - oPic.offsetLeft;　　//获取鼠标按下时在X方向上的的坐标位置
  47.          var disY = oEvent.clientY - oPic.offsetTop;　　//获取鼠标按下时在Y方向上的坐标位置
  48.          var preX = oEvent.clientX;　　//计算速度的第一个点-X
  49.          var preY = oEvent.clientY;　　//计算速度的第一个点-Y
  50.          clearInterval(timer);
  51.          document.onmousemove = function (ev){
  52.              var oEvent = ev || event;
  53.              iSpeedX = oEvent.clientX - preX;　　//速度-X
  54.              iSpeedY = oEvent.clientY - preY;　　//速度-Y
  55.              preX = oEvent.clientX;
  56.              preY = oEvent.clientY;
  57.              var l = oEvent.clientX - disX;　　//鼠标拖动时的坐标-X
  58.              var t = oEvent.clientY - disY;　　//鼠标拖动时的坐标-Y
  59.  　　　　　　　//拖动时通过DOM来创建DIV计算速度
  60.              var oBox = document.createElement("div");
  61.              oBox.className = "box";
  62.              oBox.style.left = oEvent.clientX + "px";
  63.              oBox.style.top = oEvent.clientY + "px";
  64.              document.body.appendChild(oBox);
  65.  
  66.              oPic.style.left = l + "px";　　//拖动时oPic的left或top值
  67.              oPic.style.top = t + "px";
  68.  
  69.              //document.title = l + "," +t + "," + iSpeedX + "," + iSpeedY;
  70.          }
  71.          document.onmouseup = function (){
  72.              document.onmousemove = null;
  73.              startMove();　　//回弹
  74.          }
  75.  
  76.          return false;
  77.  
  78.      }
  79.      function startMove(){
  80.          clearInterval(timer);
  81.          timer = setInterval(function (ev){
  82.              iSpeedY +=3;
  83.              var L = oPic.offsetLeft + iSpeedX;
  84.              var T = oPic.offsetTop + iSpeedY;
  85.              if(L < 0){
  86.                  L = 0;
  87.                  iSpeedX *= -1;
  88.                  iSpeedX *=0.75;
  89.              }else if(L > document.documentElement.clientWidth - oPic.offsetWidth){
  90.                  L= document.documentElement.clientWidth - oPic.offsetWidth;
  91.                  iSpeedX *= -1;
  92.                  iSpeedX *=0.75;
  93.              }
  94.              if(T < 0){
  95.                  T = 0;
  96.                  iSpeedY *=-1;
  97.                  iSpeedY *=0.75;
  98.              }else if(T > document.documentElement.clientHeight - oPic.offsetHeight){
  99.                  T = document.documentElement.clientHeight - oPic.offsetHeight;
  100.                  iSpeedY *=-1;
  101.                  iSpeedY *=0.75;
  102.                  iSpeedX *=0.75;
  103.              }
  104.              oPic.style.left = L + "px";
  105.              oPic.style.top = T + "px";
  106.  
  107.              console.log(L + " , " + T + " , " + iSpeedX + " , " + iSpeedY);
  108.          },30)
  109.      }
  110.  }
  111.  </script>
  112.  
  113.  </head>
  114.  
  115.  <body>
  116.  
  117.  <img src="f.jpg" id="pic">
  118.  
  119.  </body>
  120.  </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. T114048 [RC-02] yltx数对 (打表）

    这题如果全部打表的话,文件大小会有65kb,超了,所以只打出一半,前一半用程序算就可以了,并不会超时. 如果算法优化的好,其实可以打的更少. #include <bits/stdc++.h> ...

  2. 吴裕雄 PYTHON 神经网络——TENSORFLOW 无监督学习处理MNIST手写数字数据集

    # 导入模块 import numpy as np import tensorflow as tf import matplotlib.pyplot as plt # 加载数据 from tensor ...

  3. MyBatis逆向工程的使用（非插件方式）

    一.概述 MyBatis是目前流行的优秀持久层框架,其逆向工程更是大大缩减了开发时间.所谓逆向工程,指的是mybatis根据数据库设计好的表,自动生成对应model.mapper及mapper.xml ...

  4. SSIS 从oracle 转数据回MS SQL

    SSIS 从oracle 转数据回MS SQL,转每月的销售记录,大概15000以内,在开发机器上没问题,部署到生产环境出现各种状况“ SSIS 无法从连接伺服器的OLE DB提供者BULK 提取资料 ...

  5. 让你的逼格瞬间提升的十个Python语法！

    Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...

  6. 用myeclipse快速搭建hibernate实现数据库访问

    前言 hibernate使用的大致过程为引入jar包.配置主配置文件.配置映射文件.编写实体类.编写dao.但是每一步都需要知道的内容都相对不少,造成困难.如果使用myeclipse提供的支持将非常容 ...

  7. java 日志的数据脱敏

    思路 1.在 model层进行处理,直接重写get方法,在写一个getPlain 获取明文方法.(缺点:数据库写入和json序列化传递时使用的都是密文) 2.利用 日志组件过滤 特定的key,去进行脱 ...

  8. Cisco AP-如何调整LAP信道

    GUI方法: CLI的方法:根据对应的接口去调整信道,信道带宽,传输功率等信息吧.(Cisco Controller) >config slot 0 antenna Configures the ...

  9. idea 配置JVM参数

    -Dfile.encoding=UTF-8 -Xms512m -Xmx3072m -XX:PermSize=512m

  10. leetcode: 0204 完成的

    目录 大纲:0204 完成的 notes ✅1051 高度检查器 ✅ 728 自除数 brute c解答: java switch 语句 java api: array 直接有 length 属性 , ...