大发uu直播快3官方_大发UU快3直播平台 - 大发uu直播快3官方,大发UU快3直播平台是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计。

好程序员技术教程分享JavaScript运动框架

  • 时间:
  • 浏览:2

调用上述运动框架的实例:

var div_icon=document.getElementById('icon');

var aList=div_icon.getElementsByTagName('a');

for(var i=0;i aList[i].onmouseover=function(){

var _this=this.getElementsByTagName('i')[0];

Move(_this,{top:-70,opacity:0},function(){

_this.style.top=30+'px';

Move(_this,{top:10,opacity:30});

});

}

}

JavaScript的运动,即让某元素的或多或少属性由从前值变到从前值的过程。如让div的width属性由30px变到30px,opacity属性由0.3变到1.0,要是从前运动过程。

封装好的getStyle函数,在下面的运动框架中会用到:

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr]; //针对IE

}

else{

return getComputedStyle(obj,false)[attr]; //针对Firefox

}

}

实现运动要注意以下方面:

好应用程序员技术教程分享JavaScript运动框架,有须要的亲戚亲戚人们还须要参考下。

好了,以上要是用JavaScript编写的运动框架。此外,jQuery中的animate函数也还须要方便实现上述功能:

$(function(){

$('#icon a').mouseenter(function(){

$(this).find('i').animate({top:"-70px",opacity:"0"}, 30,function(){ //动画速率单位单位为30ms

$(this).css({top:"30px"});

$(this).animate({top:"10px",opacity:"1"}, 30);

});

})

})

万能的运动框架:

function Move(obj,json,callback){

var flag=true; //标志变量,为true表示所有运动都到达目标值

clearInterval(obj.timer);

obj.timer=setInterval(function(){

flag=true;

for(var attr in json){

//获取当前值

var curr=0;

if(attr=='opacity'){

curr=Math.round(parseFloat(getStyle(obj,attr))*30); //parseFloat可解析字符串返回浮点数//round四舍五入

}

else{

curr=parseInt(getStyle(obj,attr)); //parseInt可解析字符串返回整数

}

//计算速率单位单位

var speed=(json[attr]-curr)/10;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

//检测是否停止

if(curr!=json[attr]){

flag=false; //有从前属性未达目标值,就把flag变成false

}

if(attr=='opacity'){

obj.style.filter='alpha(opacity:'+(curr+speed)+')'; //针对IE

obj.style.opacity=(curr+speed)/30; //针对Firefox和Chrome

}

else{

obj.style[attr]=curr+speed+'px';

}

}

if(flag){

clearInterval(obj.timer);

if(callback){

callback();

}

}

},30);

}