<style>
#div1{width: 100px; height: 100px; background: red; filter:alpha(opacity:30); opacity: 0.3;}
</style>
<script src="move.js"></script>
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
//startMove(oDiv,{width:120,height:300,opacity:100},function(){ alert("结束");});
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true; //假设:所有的值都已经执行到了目标结果
for(var attr in json){
var cur = 0;
if(attr=="opacity"){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur = parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){
bStop=false;
}
if(attr=="opacity"){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style[attr]=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},30);
}
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn = document.getElementById("btn");
oBtn.onclick=function(){
startMove(oDiv,{width:120,height:300,opacity:100},function(){
alert("结束");
});
}
}
< input type="button" id="btn" value="按钮">
< div id="div1"></div>
上一篇:
js幻灯片自动播放
下一篇:
js使用cookie基本操作
友情提示:垃圾评论一律封号...