简易透明度和运动框架

来源：互联网发布：帝国cms权限设置编辑：程序博客网时间：2024/05/18 01:27

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Demo</title>
<link rel="icon" href="images/2.jpg" />
<style>
*{margin:0;padding:0;}
html,body{width:100%;height:100%;}
#div1{width:100px;height:100px;background-color:#660099;position:absolute;left:0px;top:0px;}
#div2{width:100px;height:100px;background-color:#ff99ff;position:absolute;left:120px;top:0px;}
</style>
</head>
<body>
<div id="div1">
</div>

<script>
window.onload=function(){
addPic();
}
function addPic(){
var div1=document.getElementById("div1");
onMove(div1,"width",200,5,function(){
onOpac(div1,"opacity",10,5,function(){
onOpac(div1,"opacity",100,5,function(){
onMove(div1,"height",300,5,function(){
onMove(div1,"height",200,5)
})
})
})
});
}
function onMove(obj,attr,iTarget,iSpeed,fn){
var timer=null;
var num=0;
var t=0;//obj实时位置
clearInterval(timer);
timer=setInterval(function(){
var t=getStyle(obj,attr);
if(t<iTarget){
num=Math.ceil((iTarget-t)/iSpeed);
}else{
num=Math.floor((iTarget-t)/iSpeed);
}
if(t==iTarget){
clearInterval(timer);
if(fn){
fn();
}
}else{
obj.style[attr]=t+num+"px";
}
},50)
}
function onOpac(obj,attr,iTarget,iSpeed,fn){
var timer=null;
var t=0;
var num=0;
clearInterval(timer);
timer=setInterval(function(){
t=(getStyle(obj,attr)).toFixed(2)*100;//要加toFixed
if(t<iTarget){
num=Math.ceil((iTarget-t)/iSpeed);
}else{
num=Math.floor((iTarget-t)/iSpeed);
}
if(t==iTarget){
clearInterval(timer);
if(fn){
fn();
}
}else{
obj.style[attr]=(t+num)/100;
}
},50);
}
function getStyle(obj,attr){
return parseFloat(getComputedStyle(obj,null)[attr]);//要用parseFloat
}
</script>
</body>
</html>

0 0