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代码解析
所谓学习问题,是指观察由n个样本组成的集合,并依据这些数据来预測未知数据的性质. 学习任务(一个二分类问题): 区分一个普通的互联网检索Query是否具有某个垂直领域的意图.如果如今有一个O2O领域的 ...
- 编译Linux Kernel
近期编译 Linux Kernel 被 header 所在的文件骗了,使用命令例如以下 cd /usr/src/linux-headers-3.11.0-24-generic/ make menuco ...
- 33.IDEA + maven]在IDEA中打开一个maven项目，resolve完依赖后，缺少部分jar包问题
转自:https://www.cnblogs.com/zazalu/p/7649590.html [注意]作者只是对使用过程中遇到的问题提出了一个解决方案,但是本人在编写此解决方案文章的时候,对mav ...
- js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...
- Linux基础(vim)
1.源文件到可执行文件经历了什么? gcc -E main.c -o(输出) main.i 第一阶段:预处理:加载了include文件 gcc -S main.i -o main.s 第二阶段:编译( ...
- chage---修改帐号和密码的有效期限
chage命令 chage命令是用来修改帐号和密码的有效期限. 语法 chage [选项] 用户名 选项 -m:密码可更改的最小天数.为零时代表任何时候都可以更改密码. -M:密码保持有效的最大天 ...
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) C】 Travelling Salesman and Special Numbers
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现. 进行一次操作过后. 得到的数字肯定是<=1000的 然后1000以下可以暴力做的. 则我们枚举第1步后得到的数字x是 ...
- C++的class的样例
私有就是仅仅可以通过内部调用,在类外面是不可以使用私有成员的 简单的写一个 Class A { public: //你能够通过公有的函数去訪问私有成员 Demo() //能够在这使 ...
- UVA 11346 Probability (几何概型， 积分)
题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=2321">https://uva ...
- android.graphics.Paint方法setXfermode (Xfermode x...
mPaint = new Paint(); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN)); 常见的Xfermod ...