<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>弹性势能动画(弹力球效果)</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #box {

            position: absolute;

            top: 0;

            left: 0;

            width: 100px;

            height: 100px;

            font-size: 30px;

            text-align: center;

            line-height: 100px;

            background-color: greenyellow;

            border-radius: 50%;

            cursor: move;

            user-select: none;

        }

    </style>

</head>

<body>

<div id="box">弹</div>

<script type="text/javascript">

    var oDiv = document.getElementById('box');

    oDiv.addEventListener('mousedown', down, false);

    function down(e) {

        this.startX = e.clientX;

        this.startY = e.clientY;

        this.startL = this.offsetLeft;

        this.startT = this.offsetTop;

        var _this = this;

        this.MOVE = function (e) {

            move.call(_this, e);

        };

        this.UP = function (e) {

            up.call(_this);

        };

        document.addEventListener('mousemove', this.MOVE, false);

        document.addEventListener('mouseup', this.UP, false);

        window.clearInterval(this.flyTimer);

        window.clearInterval(this.dropTimer);

    }

    function move(e) {

        var curL = e.clientX - this.startX + this.startL,

                curT = e.clientY - this.startY + this.startT;

        var minL = 0, minT = 0, maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth, maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;

        curL = curL < minL ? minL : (curL > maxL ? maxL : curL);

        curT = curT < minT ? minT : (curT > maxT ? maxT : curT);

        this.style.left = curL + 'px';

        this.style.top = curT + 'px';

        if (!this.pre) {

            this.pre = this.offsetLeft;

        } else {

            this.speedFly = this.offsetLeft - this.pre;

            this.pre = this.offsetLeft;

        }

    }

    function up() {

        document.removeEventListener('mousemove', this.MOVE, false);

        document.removeEventListener('mouseup', this.UP, false);

        fly.call(this);

        drop.call(this);

    }

    function fly() {

        var _this = this;

        _this.flyTimer = setInterval(function () {

            if (Math.abs(_this.speedFly) < 0.5) {

                clearInterval(_this.flyTimer);

                return;

            }

            _this.speedFly *= 0.98;

            var curL = _this.offsetLeft + _this.speedFly;

            var minL = 0, maxL = (document.documentElement.clientWidth || document.body.clientWidth) - _this.offsetWidth;

            if (curL <= minL) {

                _this.style.left = 0;

                _this.speedFly *= -1;

            } else if (curL >= maxL) {

                _this.style.left = maxL + 'px';

                _this.speedFly *= -1;

            }

            else {

                _this.style.left = curL + 'px';

            }

        }, 10);

    }

    function drop() {

        var _this = this;

        _this.dropFlag = 0;

        _this.dropTimer = setInterval(function () {

            if (_this.dropFlag > 1) {

                clearInterval(_this.dropTimer);

                return;

            }

            !_this.dropSpeed ? _this.dropSpeed = 10 : _this.dropSpeed += 10;

            _this.dropSpeed *= 0.98;

            var curT = _this.offsetTop + _this.dropSpeed;

            var maxT = (document.documentElement.clientHeight || document.body.clientHeight) - _this.offsetHeight;

            if (curT >= maxT) {

                _this.style.top = maxT + 'px';

                _this.dropSpeed *= -1;

                _this.dropFlag++;

            } else {

                _this.style.top = curT + 'px';

                _this.dropFlag = 0;

            }

        }, 10);

    }

</script>

</body>

</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. CentOS 7上安装gitlab-runner

    1.yum install gitlab-runner -y 2.Registering Runners a.Run the following command: gitlab-runner regi ...

  2. Linux学习总结（8）——VMware v12.1.1 专业版以及永久密钥

    VMware v12.1.1 专业版以及永久密钥 热门虚拟机软件VMware Workstation 现已更新至v12.1.1 专业版!12.0属于大型更新,专门为Win10的安装和使用做了优化,支持 ...

  3. cocos2d-x的声音控制

    声音控制SimpleAudioEngine是单例.下面是其方法. [cpp] view plaincopy //获得SimpleAudioEngine的实例 static SimpleAudioEng ...

  4. NYOJ 203 三国志(Dijkstra+贪心)

    三国志 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描写叙述 <三国志>是一款非常经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.如今他把游戏简化一下 ...

  5. Inception V3 的 tensorflow 实现

    tensorflow 官方给出的实现:models/inception_v3.py at master · tensorflow/models · GitHub 1. 模型结构 首先来看 Incept ...

  6. RTSP传输协议之Methods总结

    RTSP/1.0 200 OK Server: DSS/5.5.5 (Build/489.16; Platform/Linux; Release/Darwin; state/beta; ) Cseq: ...

  7. 浏览器加载跟渲染html的顺序-css渲染效率的探究

    1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...

  8. Js经典实例收集

    跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(t ...

  9. IIS文件上传大小修改配置说明

    原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(IIS 7 默认文件上传大小时30M). 解决:IIS7更改asp.net文件上传大小限制 步骤如下: 1.    修改I ...

  10. Android框架之路——OkGo的使用

    一.简介 该库是封装了okhttp的标准RESTful风格的网络框架,可以与RxJava完美结合,比Retrofit更简单易用.支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数 ...