JS实现弹性势能效果(弹力球效果[实现插件封装])

<!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实现弹性势能效果(弹力球效果[实现插件封装])的更多相关文章

js 实现弹力球效果
1.html代码: <div id='imgid'> <img src="img/5.png"> </div> 2.js代码: imgobj=d ...
html5悬浮球效果
自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js实现中文简繁切换效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果在谈组件之前来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

随机推荐

[Python] Find available methods and help in REPL
For example you want to know what methods are available in Python for String, you can do : dir(" ...
jquery07
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
js--11对象的创建方式
<html> <head> <title>Object</title> </head> <body> <script ty ...
android图像处理系列之三－－图片色调饱和度、色相、亮度处理
原图: 处理后: 下面贴代码: 一.图片处理层: package com.jacp.tone.view; import java.util.ArrayList; import android.cont ...
自己增删改查Razor页面
AccountContext db = new AccountContext(); public ActionResult Index() { return View(db.SysUsers); } ...
JavaScript--数据结构与算法之图
图和图的算法:图的定义:由边的集合及顶点的集合组成. 例如地图,每个城镇是顶点,道路是边,由顶点对来定义(城镇1,城镇2)简称(v1,v2)顶点也有权重——成本.基本概念: 有向图:图的顶点对是有序的 ...
python3 时间处理
1 标记当前时间 import datetime from dateutil import tz #标记当前时间为中国时间注意(replace 只有标记的意思没有转化的意思) datetime.da ...
mysql 数据库存储数据类型
int 类型的数据可以在数据库里存成 char字符串类型的数据: 纯数字的字符串可以在数据库里存储为 int的数据类型.
今日SGU 5.8
SGU 109 题意:一个n*n的矩形,起点在1,1然后每次给你一个操作,走ki步,然后你可以删除任意一个点这次步走不到的,删了就不能再走了,然后问构造这种操作,使得最后删除n*n-1个点剩下一个点 ...
【LeetCode-面试算法经典-Java实现】【144-Binary Tree Preorder Traversal（二叉树非递归前序遍历）】
[144-Binary Tree Preorder Traversal(二叉树非递归前序遍历)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bina ...

JS实现弹性势能效果(弹力球效果[实现插件封装])

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

随机推荐

热门专题