原生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 相关文章推荐
document.all与WEB标准
May 13 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
js获取json元素数量的方法
Jan 27 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
原生js+canvas实现下雪效果
Aug 02 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
jQuery实现跨域
2015/02/03 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
使用javascript插入样式
2016/03/14 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python word转pdf代码实例
2019/08/16 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
新学期校长寄语
2014/01/18 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Java详细解析==和equals的区别
2022/04/07 Java/Android