1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>弹性势能动画(弹力球效果)</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         #box {
  13.             position: absolute;
  14.             top: 0;
  15.             left: 0;
  16.             width: 100px;
  17.             height: 100px;
  18.             font-size: 30px;
  19.             text-align: center;
  20.             line-height: 100px;
  21.             background-color: greenyellow;
  22.             border-radius: 50%;
  23.             cursor: move;
  24.             user-select: none;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div id="box">弹</div>
  30.  
  31. <script type="text/javascript">
  32.     var oDiv = document.getElementById('box');
  33.     oDiv.addEventListener('mousedown', down, false);
  34.     function down(e) {
  35.         this.startX = e.clientX;
  36.         this.startY = e.clientY;
  37.         this.startL = this.offsetLeft;
  38.         this.startT = this.offsetTop;
  39.  
  40.         var _this = this;
  41.         this.MOVE = function (e) {
  42.             move.call(_this, e);
  43.         };
  44.         this.UP = function (e) {
  45.             up.call(_this);
  46.         };
  47.         document.addEventListener('mousemove', this.MOVE, false);
  48.         document.addEventListener('mouseup', this.UP, false);
  49.  
  50.         window.clearInterval(this.flyTimer);
  51.         window.clearInterval(this.dropTimer);
  52.     }
  53.     function move(e) {
  54.         var curL = e.clientX - this.startX + this.startL,
  55.                 curT = e.clientY - this.startY + this.startT;
  56.  
  57.         var minL = 0, minT = 0, maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth, maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
  58.  
  59.         curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
  60.         curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
  61.         this.style.left = curL + 'px';
  62.         this.style.top = curT + 'px';
  63.  
  64.         if (!this.pre) {
  65.             this.pre = this.offsetLeft;
  66.         } else {
  67.             this.speedFly = this.offsetLeft - this.pre;
  68.             this.pre = this.offsetLeft;
  69.         }
  70.     }
  71.     function up() {
  72.         document.removeEventListener('mousemove', this.MOVE, false);
  73.         document.removeEventListener('mouseup', this.UP, false);
  74.  
  75.         fly.call(this);
  76.  
  77.         drop.call(this);
  78.     }
  79.  
  80.     function fly() {
  81.         var _this = this;
  82.         _this.flyTimer = setInterval(function () {
  83.             if (Math.abs(_this.speedFly) < 0.5) {
  84.                 clearInterval(_this.flyTimer);
  85.                 return;
  86.             }
  87.             _this.speedFly *= 0.98;
  88.             var curL = _this.offsetLeft + _this.speedFly;
  89.             var minL = 0, maxL = (document.documentElement.clientWidth || document.body.clientWidth) - _this.offsetWidth;
  90.             if (curL <= minL) {
  91.                 _this.style.left = 0;
  92.                 _this.speedFly *= -1;
  93.             } else if (curL >= maxL) {
  94.                 _this.style.left = maxL + 'px';
  95.                 _this.speedFly *= -1;
  96.             }
  97.             else {
  98.                 _this.style.left = curL + 'px';
  99.             }
  100.         }, 10);
  101.     }
  102.  
  103.     function drop() {
  104.         var _this = this;
  105.         _this.dropFlag = 0;
  106.         _this.dropTimer = setInterval(function () {
  107.             if (_this.dropFlag > 1) {
  108.                 clearInterval(_this.dropTimer);
  109.                 return;
  110.             }
  111.             !_this.dropSpeed ? _this.dropSpeed = 10 : _this.dropSpeed += 10;
  112.             _this.dropSpeed *= 0.98;
  113.             var curT = _this.offsetTop + _this.dropSpeed;
  114.             var maxT = (document.documentElement.clientHeight || document.body.clientHeight) - _this.offsetHeight;
  115.             if (curT >= maxT) {
  116.                 _this.style.top = maxT + 'px';
  117.                 _this.dropSpeed *= -1;
  118.                 _this.dropFlag++;
  119.             } else {
  120.                 _this.style.top = curT + 'px';
  121.                 _this.dropFlag = 0;
  122.             }
  123.         }, 10);
  124.     }
  125. </script>
  126. </body>
  127. </html>

JS实现弹性势能效果(弹力球效果[实现插件封装])的更多相关文章

  1. js 实现弹力球效果

    1.html代码: <div id='imgid'> <img src="img/5.png"> </div> 2.js代码: imgobj=d ...

  2. html5悬浮球效果

    自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq ...

  3. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  4. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  5. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  9. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

随机推荐

  1. PHP读取txt文件到数据库

    <?PHP$txt=$C->SITE_URL.'images/my.txt';$row = file($txt); //读出文件中内容到一个数组当中 $num=0;//统计表中的记录数 f ...

  2. OpenJDK源码研究笔记(十一):浅析Javac编译过程中的抽象语法树(IfElse,While,Switch等语句的抽象和封装)

    浅析OpenJDK源码编译器Javac的语法树包com.sun.source.tree. 抽象语法树,是编译原理中的经典问题,有点难,本文只是随便写写. 0.赋值语句 public interface ...

  3. Mysql学习总结（11）——MySql存储过程与函数

    摘要:存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句.存储过程和函数可以避免开发人员重复的编写相同的SQL语句.而且,存储过程和函数是在 ...

  4. vim 基础学习之查找

    普通模式下 /->正向查找 n-向下查找 N-向上查找 ?->反向查找 N-向下查找 n-向上查找 <C-r><C-w> <C-r>-引用,例如引用寄存 ...

  5. php数组合并有哪三种方法

    php数组合并有哪三种方法 一.总结 一句话总结:array_merge():array_merge_recursive():‘+'号 $a = array('color'=>'red',5,6 ...

  6. 10.cocos2d坐标系

    一.笛卡儿坐标系 OpenGl坐标系为笛卡儿右手系.x向右,y向上,z向外.在cocos2d-lua中坐标系原点在屏幕的左下角,x向右,y向上,z则是指的zorder(层级). 二.世界坐标系,本地坐 ...

  7. storm排错

    1.运行错误如下 Exception in thread "main" java.lang.RuntimeException: org.apache.thrift7.transpo ...

  8. js 判断是不是空、值是否存在

    判断数组是否存在某个值: Array.indexOf(val) > -1 //存在 (缺陷:一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观.二 ...

  9. hostname---显示和设置系统的主机

    hostname命令用于显示和设置系统的主机名称.环境变量HOSTNAME也保存了当前的主机名.在使用hostname命令设置主机名后,系统并不会永久保存新的主机名,重新启动机器之后还是原来的主机名. ...

  10. tree ---树状显示

    tree命令以树状图列出目录的内容. 语法 tree(选项)(参数) 选项 -a:显示所有文件和目录: -A:使用ASNI绘图字符显示树状图而非以ASCII字符组合: -C:在文件和目录清单加上色彩, ...