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 即说是杭州人民法院的 ...

随机推荐

Mybatis mapper.xml文件头文件备份
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
AutoLayout具体解释+手把手实战
首先说一下这篇博客尽管是标记为原创,可是事实并不是本人亲自写出来的.知识点和样例本人花了一天各处查找和整理终于决定写一个汇总的具体解释,解去各位朋友到处盲目查找的必要,由于不是转载某一个人的内容.故此 ...
Linq聚合函数使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
elasticsearch index 之merge
merge是lucene的底层机制,merge过程会将index中的segment进行合并,生成更大的segment,提高搜索效率.segment是lucene索引的一种存储结构,每个segment都 ...
sublime 支持 vue 语法
具体步骤如下: 1.如果你没安装Package Control,请先安装,安装方法请自行百度.安装OK后,接下来步骤请参考第2步即可. 2.如果你已经安装过Package Control,安装vue高 ...
js---跨域的问题
一:跨域一般的报错情况一般来说,如果你在开发中需要进行跨域操作(从一个非同源网站发送请求获取数据),一般而言,你在浏览器控制台看到的结果为: 二:同源策略说到跨域就不得不提“同源策略”. 那么, ...
使用maven的tomcat:run进行web项目热部署
近期又又一次看了一下maven的东西,事实上主要是由于去了解Jenkins,后期或许会补充jenkins的博文. 怎么在eclipse里面创建maven webproject,这边就不介绍了,參见:h ...
apache 使用 mod_fcgid.so模块时配置指令
FcgidBusyScanInterval指令说明:扫描繁忙超时进程的间隔语法: FcgidBusyScanInterval seconds 默认:FcgidBusyScanInterval 12 ...
没有killall命令的解决方法
没有killall命令的解决方法 -bash: killall: command not found https://www.byte128.com/archives/231.html 执行killa ...
28.semaphore跨进程通信
根据id创建Semaphore,并初始化有一个信号量可用 name类型是char *...; HANDLE hsem = CreateSemaphoreA(NULL, 1, , name); 关闭句柄 ...

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

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

随机推荐

热门专题