封装运动框架基本函数（多个属性包括透明度和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. 实现链式运动框架 ...
随机推荐
- winform Timer控件的使用
private void button1_Click(object sender, EventArgs e){ Timer timer1 = new Timer(); timer1.Interval ...
- TP5 未定义变量:XXX
TP5开发模式下报错级别非常高,哪怕变量未定义都直接抛出异常 应用公共函数文件 路径: application/common.php 在common.php文件写入 // 异常错误报错级别, err ...
- 使用 sed 命令查找和替换文件中的字符串的 16 个示例
当你在使用文本文件时,很可能需要查找和替换文件中的字符串.sed 命令主要用于替换一个文件中的文本.在 Linux 中这可以通过使用 sed 命令和 awk 命令来完成. 在本教程中,我们将告诉你使用 ...
- 源码编译apache出错
报错信息如下 exports.c:1572: error: redefinition of `ap_hack_apr_allocator_create' exports.c:177: error: ` ...
- PADS常用画板过程
转载:PADS LAYOUT的一般流程 http://www.doc88.com/p-9129306856292.html https://wenku.baidu.com/view/cc4e0b338 ...
- Java代码审计-铁人下载系统
初学 java 代码审计,跟着表哥们脚步,走一遍审计流程,就选了个没有使用 Java 框架的 java 系统,作为入门. 目的是为了熟悉代码审计流程,寻找漏洞的思路,入门记录. 准备工作 为了验证审计 ...
- Kotlin之环境的配置和搭建
第一步 . 安装和配置JDK http://www.cnblogs.com/loaderman/p/6402948.html 第二步 安装和下载Kotlin 进入Kotlin官网 :https :// ...
- Java中this和super的用法总结(转)
原文地址:https://www.cnblogs.com/hasse/p/5023392.html 这几天看到类在继承时会用到this和super,这里就做了一点总结,与各位共同交流,有错误请各位指正 ...
- Selenium 2自动化测试实战9（简单元素操作）
一.简单元素操作 1. webdriver中常用的几个方法: clear():清除文本 send_keys(*value):模拟按键输入 click():单击元素 clear()方法用于清除文本输入框 ...
- 如何修改eclipse中的maven的仓库地址
最近的有一个朋友问我如何修改eclipse的maven的本地仓库,我想了一下,这个玩意一般是不用修改的,主要是你本地安装的maven在哪个位置,一般的本地仓库位置在 C:\Users\username ...