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. ...
随机推荐
- MTK平台系统稳定性分析
目录 1:简介 2:怎么抓取和分析log 3:怎么确定问题点 简介 系统稳定性目前主要是解决系统死机重启. 分为两部分:Android /kernel Kernel 分析需要的文件和工具: Mtklo ...
- 备用交换机（cogs 8）
[问题描述] n个城市之间有通讯网络,每个城市都有通讯交换机,直接或间接与其它城市连接.因电子设备容易损坏,需给通讯点配备备用交换机.但备用交换机数量有限,不能全部配备,只能给部分重要城市配置.于是规 ...
- JQuery中如何重置(reset)表单(且清空隐藏域)
由于JQuery中,提交表单是像下面这样的: 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下, ...
- Spring mvc+Easyui遇到的几个问题
简单的一个数据表的增删查改的总体界面的展示效果例如以下图: 1.datagrid数据载入问题 datagrid通过url请求后台数据,总记录数和数据行的属性是固定死的.数据行是rows,总记录数为to ...
- OpenJudge百炼习题解答（C++）--题2704：竞赛评分
题: 总时间限制: 1000ms 内存限制: 65536kB 描写叙述 现举行一次小竞赛,參赛的3支队伍,编号为1,2,3.每支队列轮流回答问题,假设回答正确,加10分;回答错误,扣10分;放弃 ...
- 【转】java中Thread类方法介绍
原文: java中Thread类方法介绍 http://blog.csdn.net/seapeak007/article/details/53395609 这篇文章找时间分析一下!!!:http:// ...
- HTML5：表格
表格的作用是显示二维数据.在HTML5中不再同意用表格控制页面内容的布局.而是採用新增的CSS表格特性(这里不涉及CSS,将在后面介绍). 以下主要介绍用于制作表格的HTML元素. 构建表格 表格的基 ...
- Bitmap工具类BitmapHelper
BitmapHelper 提供一些获取本地缩略图,获取网络图片.dp与px的相互转换等方法. import java.io.ByteArrayInputStream; import java.io.B ...
- 《从零開始学Swift》学习笔记（Day 55）——使用try?和try!差别
原创文章.欢迎转载.转载请注明:关东升的博客 在使用try进行错误处理的时候,常常会看到try后面跟有问号(? )或感叹号(!),他们有什么差别呢? 1.使用try? try?会将错误转换为可选值 ...
- Selenium-一个用于Web应用程序测试的工具
Selenium.pptx