这是按照课程敲的代码,在宽高同时运动时还有用,到例子就不对劲了,走一下停一下
function getstyle(obj,attr){
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
var timer=null;
function startMove(obj,json,fn){ //fn为回调函数
clearInterval(obj.timer);
var flag=true;
obj.timer=setInterval(function(){
//取当前值
//var flag=true;
for(var attr in json)
{
var icurr=0;//要获取的属性
var speed=0;
if(attr=='opacity'){
icurr=Math.round(parseFloat(getstyle(obj,attr))*100);
}
else{
icurr=parseInt(getstyle(obj,attr));
}
//计算速度
speed=(json[attr]-icurr)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//判断停止
if(icurr!=json[attr])
{
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icurr+speed)+')';//针对IE
obj.style.opacity=(icurr+speed)/100;
}
else{
obj.style[attr]=icurr+speed+'px';
}
}
if(flag=true)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},30);
}
例子部分:
<script type="text/javascript" >
window.onload=function(){
var oMove=document.getElementById('move');
var alist=oMove.getElementsByTagName('a');
for(var i=0;i<alist.length;i++)
{
alist[i].onmouseenter=function(){
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:-25,opacity:0},function(){
startMove(_this,{top:20,opacity:100})
})
}
}
}
</script>
每次移入向上走一下
qq_临摹不凡_0
相关分类