<!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. ItelliJ IDEA开发工具使用—创建一个web项目（转）

    最近想用IDEA编辑器开发,但是平时都用MyEclipse和eclipse习惯了,突然间用IDEA到处碰壁的感觉.在不断的摸索之后终于苦尽甘来,学会了基本的web程序如何创建以及运行了.期间在网上找了 ...

  2. 实际运用中DataSet、DataTable、DataRow点滴

    DataSet.DataTable都自带有序列化标记,但是DataRow没有, 所以如果是在CS程序中,Release版本程序DataTable才是最小的数据传输单元,如果使用DataRow则会报[未 ...

  3. 洛谷 P2117 小Z的矩阵

    P2117 小Z的矩阵 题目描述 小Z最近迷上了矩阵,他定义了一个对于一种特殊矩阵的特征函数G.对于N*N的矩阵A,A的所有元素均为0或1,则G(A)等于所有A[i][j]*A[j][i]的和对2取余 ...

  4. Codeforces Round #262 (Div. 2) 题解

    A. Vasya and Socks time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. 一步一步跟我学hadoop(1)----hadoop概述和安装配置

    这几年云计算大数据非常火,借这个东风.今天開始学习apache的分布式计算框架hadoop,希望不要太落后. Hadoop说明 对于hadoop.apache官方wiki给出的说明为 Apache H ...

  6. XML与JSON的区别?各自有哪些优缺点?

    JSON和XML都是数据传输格式,它们有哪些区别,又都有些什么优缺点呢?零度带领大家来分析分析. 一.先来看看两者的定义 1.XML的定义 扩展标记语言 (Extensible Markup Lang ...

  7. C#使用一般处理程序(ashx)中session

    .ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...

  8. CHARINDEX，REPLACE，LEFT+四大系统函数+模糊查询

    select CHARINDEX('bob','my name is bob',1)--返回12  bob的第一个b在字符串中排第12(从1开始数) select CEILING(456.4)--45 ...

  9. Kinect 开发 —— 深度信息（二）

    转自(并致谢):http://www.cnblogs.com/yangecnu/archive/2012/04/05/KinectSDK_Depth_Image_Processing_Part2.ht ...

  10. AMD规范(RequireJS)、CMD规范(SeaJS)、CommonJS(BravoJS)规范的辨析

    首先,AMD,CMD,CommonJS都实现了文件模块化. 对于依赖的模块:AMD是提前执行:CMD是延迟执行: AMD是依赖前置,CMD是依赖就近: AMD官方解释:https://github.c ...