封装运动框架多个属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>封装运动框架的多个属性</title> <style> div{ width: 100px; height: 100px; background-color:pink; position: absolute; left: 10px; top: 50px; } </style></head><body><button id="btn200">200</button><button id="btn400">400</button><div id="demo"></div></body></html><script> //想法：运用json来完成多个属性运动 // 1、先获得出当前样式 // 2、（最终的样式-当前的样式）/10 得到所谓的步长 当前样式用函数封装 // 3、得到对象的样式属性 = current + step +“px” var btn200 = document.getElementById("btn200"); var btn400 = document.getElementById("btn400"); var demo = document.getElementById("demo"); btn200.onclick = function(){ animate(demo,{width:200,top:300,height:600,opacity:40, zIndex:3},function(){ alert("我来了")}); } btn400.onclick = function(){ animate(demo,{top:200,left:500}); } // 多个属性运动框架 添加回调函数 function animate(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //开始遍历json var flag = true; //用来判断是否清除定时器 for(var attr in json){ //算出步长 = (目的样式 - 当前样式 ) / 10 var current = 0; if(attr == "opacity") { current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; }else { current = parseInt(getStyle(obj,attr)); }// console.log(current) //json[attr] 表示数值 attr 表示属性 var step = (json[attr] - current)/10; step = step > 0 ? Math.ceil(step) : Math.floor(step); //兼容性 if(attr == "opacity") //判断用户有没有输入透明度 { // 判断浏览器是否支持这个属性 if("opacity" in obj.style) { obj.style.opacity = (current + step) / 100; }else { 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(json[attr] != current){ flag = false; } } if(flag) // 用于判断定时器的条件 { clearInterval(obj.timer); //alert("ok了"); if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调 { fn(); // 函数名 + （） 调用函数 执行函数 } } },30) } //封装当前样式函数 返回的是个数值 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return window.getComputedStyle(obj,null)[attr] } }</script>
转载于:https://www.cnblogs.com/zhaocong/p/7360550.html
封装运动框架多个属性相关推荐
- 原生JS封装运动框架。
//获取非行内样式function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return ...
- 多元素运动框架-链式运动的封装
1.0运动原理: 逆战班学生整理 让某件物品沿着某种方向随着时间的变化改变位置 setInterval(function(){ obox.style.left = obox.offsetLeft+10 ...
- animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
- 完美运动框架(js)
一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){cle ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- JavaScript——创建运动框架
封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各 ...
- JavaScript 运动框架
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...
- JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
- JS完美运动框架详解——原理分析及demo
1.运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.还有一个很重要的前提是,运动的物体必须是绝对 ...
最新文章
- leetcode--对称二叉树--python
- mongodb主从设置,capped collections等常用命令集合
- arcgis车辆轨迹动态_聪明反被聪明误 屏蔽车辆GPS被处罚
- java mvc 批量插入_请教mysql spring mvc +mybatis中批量插入的问题?
- python变量定义大全_详解python变量与数据类型
- c#中BackGroundWorker控件
- C语言学习及应用笔记之二：C语言static关键字及其使用
- Codeforces Round #280 (Div. 2)
- php获取当前页面select的值,关于JS获取select的值
- python求平均值函数_Python两个练习题，写出私信有奖
- opencv cv.findContours 函数详解
- consul配置mysql集群_consul1.6实现Mysql-Gtid主从读写分离和高可用-03
- ANN 神经网络介绍
- Excel插入多列相同数据
- js页面跳转，参数传递
- NginxWebUI - 图形化的 Nginx 配置管理工具
- 最全加密算法之对称加密和非对称加密
- 笔记本移动热点打开电脑断网、台式机无线wifi打开电脑断网的解决办法
- 固态硬盘开盘数据恢复的方法
- LeetCode 108. 将有序数组转换为二叉搜索树