封装运动框架基本函数(多个属性包括透明度和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. 实现链式运动框架 ...
随机推荐
- 关于 oracle10g、oracle client和plsql devement 三者之间的关系
oracle10g是服务器,如果本机安装了oracle10g,没有必要安装oracle client,只要配置好DNS,就可以使用plsql devement连接 当然你也可以同时安装orac ...
- dell 9代cpu新机器安装centos7.7 bios 配置
1.步骤如下,按f2或f12选择进入bios,每一步配置的内容如图所示,U盘写镜像,引导U盘启动,安装.(电源管理自启动那几个步骤可以不做)
- MySQL 数据库 高级查询
1.连接查询select * from Info,Nation #笛卡尔积select * from Info,Nation where Info.Nation=Nation.Code join on ...
- track-by的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Android 编程下Touch 事件的分发和消费机制和OnTouchListener,OnClickListener和OnLongClickListener的关系
1.事件分发:public boolean dispatchTouchEvent(MotionEvent ev) Touch 事件发生时 Activity 的 dispatchTouchEvent(M ...
- 初学vue 在做项目时遇到的问题与解决办法(使用element组件)(二)
表格每行里都有按钮 <el-table-column prop="option" label="操作" align="center" ...
- IFB
本文翻译自Linux官方IFB文档 IFB(中介功能块设备)是IMQ(中介队列设备)的继任者,IMQ从来没有被集成过,IFB拥有IMQ的优点,在SMP上更加清晰明了,并且代码量缩减了非常多,旧的中介设 ...
- Python之取整
在编程过程中数据处理是不可避免的,很多时候都需要根据需求把获取到的数据进行处理,取整则是最基本的数据处理.取整的方式则包括向下取整.四舍五入.向上取整等等.下面就来看看在Python中取整的几种方法吧 ...
- fixture详细介绍-作为参数传入,error和failed区别
前言 fixture是pytest的核心功能,也是亮点功能,熟练掌握fixture的使用方法,pytest用起来才会得心应手! fixture简介 fixture的目的是提供一个固定基线,在该基线上测 ...
- MySQL 5.7.27 MGR 单主/多主+ ProxySQL
1 MySQL 5.7.27 MGR 多主环境 基础信息如下: centos 6.5/vbox 实例名 A B C IP 10.15.7.29 10.15.7.28 10.15.7.27 实例端口号 ...