原生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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
Prototype使用指南之ajax
Jan 10 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
浅谈JavaScript作用域
Dec 06 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
PHP中date()日期函数有关参数整理
2011/07/19 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
继承权公证书
2014/04/09 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2015年领班工作总结
2015/04/29 职场文书
大学感恩节活动总结
2015/05/05 职场文书
患者身份识别制度
2015/08/06 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技