原生JS封装animate运动框架的实例


Posted in Javascript onOctober 12, 2017

如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我来了")});
}
btn400.onclick = function() {
animate(box,{top:500,opacity:10});
}
// 多个属性运动框架 添加回调函数
function animate(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}

if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调
{
fn(); // 函数名 + () 调用函数 执行函数
}
}
},30)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
</script>

以上这篇原生JS封装animate运动框架的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
javascript中神奇的 Date对象小结
Oct 12 #Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 #Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 #Javascript
js实现单张图片平移切换效果
Oct 11 #Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 #Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python 爬取微信文章
2016/01/30 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python更改已存在excel文件的方法
2018/05/03 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python二进制文件的转译详解
2019/07/03 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
django 外键创建注意事项说明
2020/05/20 Python
python try...finally...的实现方法
2020/11/25 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
打架检讨书400字
2014/01/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
三方股份合作协议书
2014/10/13 职场文书
加班费申请报告
2015/05/15 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript