原生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 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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 的几个配置文件函数
2006/12/21 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
header跳转和include包含问题详解
2012/09/08 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
保安自我鉴定范文
2013/12/08 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫