分享JavaScript运动框架-创新互联

本篇内容介绍了“分享JavaScript运动框架”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联公司专注于企业营销型网站、网站重做改版、东兴网站定制设计、自适应品牌网站建设、HTML5商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为东兴等各大城市提供网站开发制作服务。

JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程。如让div的width属性由200px变到400px,opacity属性由0.3变到1.0,就是一个运动过程。

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

1. 匀速运动(改变left、right、width、height、opacity等属性)

2. 缓冲运动(速度是变化的)

3. 多物体运动(注意所有东西都不能共用,否则容易产生冲突,如定时器timer)

4. 获取任意属性值(封装一个getStyle函数)

5. 链式运动(串行)

6. 同时运动(并行,同时改变多个属性,需要使用 json)

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

function getStyle(obj,attr){

if(obj.currentStyle){

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

}

else{

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

}

}

万能的运动框架:

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))*100); //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)/100; //针对Firefox和Chrome

}

else{

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

}

}

if(flag){

clearInterval(obj.timer);

if(callback){

callback();

}

}

},30);

}

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

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:100});

        });

       }

}

“分享JavaScript运动框架”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联-成都网站建设公司网站,小编将为大家输出更多高质量的实用文章!


文章题目:分享JavaScript运动框架-创新互联
URL网址:http://scyanting.com/article/dodpog.html