原生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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python3列表List入门知识附实例
2020/02/09 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
python中的yield from语法快速学习
2020/11/06 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
行政部主管岗位职责
2013/12/28 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
商场促销活动总结
2014/07/10 职场文书
保密工作承诺书
2014/08/29 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS