JS——缓慢动画封装
在知道如何获取内嵌式和外链式的标签属性值之后，我们再次封装缓慢动画：
单个属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body> <button>运动到400</button>
<button>宽度变为400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0]; btnArr[0].onclick = function () {
animate(div, "left", 400);
} btnArr[1].onclick = function () {
animate(div, "width", 400);
} //参数变为3个
function animate(ele, attr, target) {
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//四部
var leader = parseInt(getStyle(ele, attr)) || 0;//获取值可能含有px，我们只取数字部分parseInt()
//1.获取步长
var step = (target - leader) / 10;
//2.二次加工步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[attr] = leader + "px";
//4.清除定时器
if (Math.abs(target - leader) <= Math.abs(step)) {
ele.style[attr] = target + "px";
clearInterval(ele.timer);
} }, 25);
} //兼容方法获取元素样式
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
} </script>
</body>
</html>
多个属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} div {
position: absolute;
top: 40px;
left: 0px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body> <button>运动到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0]; btnArr[0].onclick = function () {
var json = {"left": 100, "top": 200, "width": 300, "height": 200};
animate(div, json);
} //参数变为2个，将属性atrr和值都存储到json中
function animate(ele, json) {
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for (var k in json) {
//四部
var leader = parseInt(getStyle(ele, k)) || 0;
//1.获取步长
var step = (json[k] - leader) / 10;
//2.二次加工步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
// if (json[k] !== leader) {
// bool = false;
// }
if (Math.abs(json[k] - leader) > Math.abs(step)) {
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if (bool) {
for (k in json) {
ele.style[k] = json[k] + "px";
}
clearInterval(ele.timer);
}
}, 25);
} //兼容方法获取元素样式
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
回调函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} div {
position: absolute;
top: 40px;
left: 0px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>运动到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json1 = {"left": 100, "top": 200, "width": 300, "height": 200};
var json2 = {"left": 0, "top": 40, "width": 100, "height": 100};
animate(div, json1, function () {
animate(div, json2);
});
} //参数变为2个，将属性atrr和值都存储到json中
function animate(ele, json, fn) {
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for (var k in json) {
//四部
var leader = parseInt(getStyle(ele, k)) || 0;
//1.获取步长
var step = (json[k] - leader) / 10;
//2.二次加工步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
// if (json[k] !== leader) {
// bool = false;
// }
if (Math.abs(json[k] - leader) > Math.abs(step)) {
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if (bool) {
for (k in json) {
ele.style[k] = json[k] + "px";
}
clearInterval(ele.timer);
//所有程序执行完毕之后执行回调函数
//现在只有传递了回调函数，才能执行
if (fn) {
fn();
}
}
}, 25);
} //兼容方法获取元素样式
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
JS——缓慢动画封装的更多相关文章
- JS——缓慢动画封装案例
手风琴 1.排他思想 2.ul宽度需要大一点,防止li撑开跑下去 3.一个变大其他所有变小,变小不能太小,不然会出现空白 <!DOCTYPE html> <html lang=&qu ...
- 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析
作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js双层动画幻灯
js双层动画幻灯 点击下载
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
随机推荐
- code wars quiz: toInteger
Your task is to program a function which converts any input to an integer. Do not perform rounding, ...
- 夜话JAVA设计模式之适配器模式(adapter pattern)
适配器模式:将一个类的接口,转换成客户期望的另一个接口,让不兼容的接口变成兼容. 1.类适配器模式:通过多重继承来实现适配器功能.多重继承就是先继承要转换的实现类,再实现被转换的接口. 2.对象适配器 ...
- 用信号量及其PV操作处理实际问题
43.现有3个生产者P1.P2.P3,他们都要生产橘子汁,每个生产者都已分别购得两种不同的原料,待购齐第三种原料后就可配制成橘子汁装瓶出售.有一供应商能源源不断的供应糖.水.橘子精,但每次只拿出一种原 ...
- Ubuntu 16.04安装uGet替代迅雷，并在Chrome中设置为默认下载器
uGet是采用aria2作为下载后端,所以两个软件都必须同时安装. 1.安装uGet sudo add-apt-repository ppa:plushuang-tw/uget-stable sudo ...
- java的异常（Exception）信息的详细记录
下面的三个方法都是获取异常的详细信息,或许的异常详细信息以字符串的形式返回,保持栈堆载的风格 方法一: public static String getExceptionAllinformation( ...
- FFmpeg滤镜使用指南
文件夹 1. FFmpeg滤镜文档 2. 演示样例 2.1 缩放 2.2 视频加速 2.3 滤镜图,链和滤镜关系 2.4 多个输入覆盖同一个2x2 网格 2.5 转义字符 2. ...
- 码位（code position/point）Unicode 编码与 Python 2/3 编码兼容性问题
Unicode HOWTO 0. 码位(code position/point) 一个码位由某个数值表示,全部码位共同构成其码值空间(code space). ASCII,0~7Fhex(128) 拓 ...
- AAC的AudioSpecificConfig细节
AAC格式里有个复杂的AudioSpecificConfig, 在FLV格式里称为AAC sequence header.在正式播放ADTS AAC数据包之前,需要用AudioSpecificConf ...
- bzoj3663
几何+lis 很巧妙.直接做很困难,那么我们转化一下,把每个点能看见的圆弧画出来.只有这些圆弧相交时才满足条件. 那么也就是找出圆上尽量多两两相交的区间. 所以我们先按左端点极角排序,然后固定一个必须 ...
- PCB genesis加尾孔实现方法
一.为什么增加尾孔呢 看一看下图在panel中增加尾孔的效果;如下图所示,主要有2点原因. 1.孔径大小测量 假设如果不增加尾孔,要检测孔径大小是否符合要求,那么QA检测会选择最后钻的孔进大小进行测量 ...