原生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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
短波问题解答
2021/02/28 无线电
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python操作SQLite简明教程
2014/07/10 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python selenium firefox使用详解
2019/02/26 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python Canny边缘检测算法的实现
2020/04/24 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
民主评议党员自我评价材料
2014/09/18 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年幼师工作总结
2014/11/22 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2016公司年会主持词
2015/07/01 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python