封装运动框架基本函数（多个属性包括透明度和zIndex)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#demo{
width:100px;
height:100px;
background-color: pink;
border:1px solid black;
position:absolute;
top:50px;
left:100px;
/*opacity:0.2;*/
}
</style>
</head>
<body>
<button id="btn1">宽度高度都是300</button>
<button id="btn2">top改为200，left改为300</button>
<button id="btn3">宽度高度都是400，top left都是400，opacity改为0.6</button>
<div id="demo"></div>
</body>
</html>
<script>
function $id(id){return document.getElementById(id);}
var btn1=$id("btn1");
var btn2=$id("btn2");
var btn3=$id("btn3");
var demo=$id("demo");
var timer=null; btn1.onclick=function () {
var json={width:300,height:300};
run(demo,json);
}
btn2.onclick=function () {
var json={top:200,left:300};
run(demo,json);
}
btn3.onclick=function () {
var json={width:400,height:400,top:400,left:400,opacity:60 ,zIndex:2};
run(demo,json);
} function run(obj,json) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var flag=true; //用来判断定时器是否停止，一定写在遍历的外面，否则一遍历就true
for(var attr in json)
{
var cstyle=0;
if(attr=="opacity")
{
cstyle= Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
}
else{
cstyle=parseInt(getStyle(obj,attr)); //获得当前属性
}
var step=(json[attr]-cstyle)/10; //计算步长
step=step>0 ? Math.ceil(step) : Math.floor(step); //判断透明度
if(attr=="opacity") // 判断用户有没有输入透明度
{
if("opacity" in obj.style) //判断浏览器支不支持opacity
{
obj.style.opacity=(cstyle+step)/100;
}
else
{
//obj.style.filter=alpha(opacity=30);
obj.style.filter="alpha(opacity="+(cstyle+step)*10+")";
}
}
//判断zIndex
else if(attr=="zIndex") //判断用户有没有输入zIndex
{
obj.style.zIndex=json[attr];
} //不是opacity也不是zIndex的情况，加+"px"的属性
else{
obj.style[attr]=cstyle+step+"px";
} if(cstyle!=json[attr]) //在遍历中，只要有一个属性值没到达目标位置，定时器就不能停
{
flag=false;
}
} if(flag) //遍历完了之后，flag是true，所有的值都到达目标位置了，停止定时器，放在定时器里里面，每隔30毫秒可以判断一次是不是应该停止定时器了
{
clearInterval(obj.timer);
}
},30)
} function getStyle(obj,attr) //返回谁的，哪个属性
{
if(obj.currrentStyle)
{
return obj.currentStyle[attr];
}
else{
return window.getComputedStyle(obj,null)[attr]; //w3c浏览器
}
} </script>
点击上方的任意一个按钮，下面的盒子相应的做出动画效果，
关键代码: var json={width:400,height:400,top:400,left:400,opacity:60 ,zIndex:2};
run(demo,json);
封装运动框架基本函数（多个属性包括透明度和zIndex)的更多相关文章
- 第61天：json遍历和封装运动框架（多个属性）
一.json 遍历 for in 关键字 for ( 变量 in 对象) { 执行语句; } 例如: var json = {width:200,height:300,left:50}co ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- JS封装运动框架（另一种写法）
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...
- js中运动框架的封装
//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- 无限循环轮播图之运动框架（原生JS）
封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...
- JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
随机推荐
- 解决Cannot change version of project facet Dynamic Web Module to 3.1
Open web.xml from project structure http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version= ...
- 第八周学习总结&实验报告（6）
实验六 异常 一.实验目的: (1)理解异常的基本概念: (2)掌握异常处理方法及熟悉常见异常的捕获方法. 二.实验要求: (1)练习捕获异常.声明异常.抛出异常的方法.熟悉try和catch子句的使 ...
- Shell中的条件测试和循环语句
1.条件测试:test或[ 如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为0 运行结果: 带与.或.非的测试命令[ ! EXPR ] : E ...
- CentOS7 一个网卡配置多个IP地址
1.给网卡p8p1新创建配置文件(复制原来的p8p1,修改IP地址即可) ifcfg-p8p1:0 vim /etc/sysconfig/network-scripts/ifcfg-p8p1:0 D ...
- 异步上传&预览图片-压缩图片
移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...
- 通过daemon.json配置docker 2375 API端口，配置私有http仓库
编辑daemon.json vi /etc/docker/daemon.json 配置如下内容即可 { "hosts":[ "tcp://0.0.0.0:2375&quo ...
- golang 使用reflect反射结构体
"反射结构体"是指在程序执行时,遍历结构体中的字段以及方法. 1.反射结构体 下面使用一个简单的例子说明如何反射结构体. 定义一个结构体,包括3个字段,以及一个方法. 通过refl ...
- [Flask]通过render_form快捷渲染表单
依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...
- java利用dom4j读取xml
java连接oracle数据库的时候, 需要从特定地方读取xml文件中的sql去get结果集, xml文件放在和java文件: SqlLoaderFromXML的目录下OracleSQL, xml文件 ...
- flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下
stack嵌套 一般情况下 stack是无法嵌套,出现stack嵌套,布局就会出乱 解决方式:就是第二个stack需要确定宽高 appbar透明 AppBar( backgroundColor: Co ...