<!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. 【Codeforces Round #459 (Div. 2) D】MADMAX

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] f[x][y][z][2] 表示第一个人到了点x,第二个人到了点y,当前轮的字母(1..26),当前轮到谁走的情况下,谁赢. 写个记 ...

  2. udacity android 学习笔记: lesson 4 part a

    udacity android 学习笔记: lesson 4 part a 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...

  3. iOS8开发~Swift(五)Swift与OC混编

    一.概要 首先看<The Swift Programming Language>中提到"Swift's compatibility with Objective-C lets y ...

  4. C语言的有符号与无符号,二进制整数的扩展与截断

    C语言的有符号与无符号,二进制整数的扩展与截断 前一节说了整数的表示方式,,也就是无符号编码与补码编码.这一届说一下二进制整数的扩展与截断,这部分内容与C语言挂钩.so,我们先看下面C语言的有符号和无 ...

  5. Jmeter作为工具的性能测

    [原创]相对完整的一套以Jmeter作为工具的性能测试教程(接口性能测试,数据库性能测试以及服务器端性能监测) 准备工作 jmeter3.1,为什么是3.1,因为它是要配合使用的serveragent ...

  6. 如何使iframe外部的超级链接的页面在iframe中打开

    如何使iframe外部的超级链接的页面在iframe中打开,有以下两种方法: 一.html方法: <iframe name="a1"></iframe> & ...

  7. ajax的内容

    ajax是什么? 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新,可以局部刷新而不必整个页面整体刷新. url的简单认识: 进入服务器的三种方式: 1.localhost:端口号 ...

  8. echo---打印变量或输出字符串

    cho命令用于在shell中打印shell变量的值,或者直接输出指定的字符串.linux的echo命令,在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的,因此有必要了解下e ...

  9. FZU 1921 栀子花开

    栀子花开 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: 19216 ...

  10. wscript shell

    http://blog.csdn.net/songques/article/details/8309569 http://baike.baidu.com/link?url=_P6z73_Ih9R79T ...