原生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的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书