网站开发需要经历哪些主要阶段,wordpress 面包屑导航代码,太原便宜做网站的公司哪家好,中考网络应用服务平台好程序员技术教程分享JavaScript运动框架#xff0c;有需要的朋友可以参考下。 JavaScript的运动#xff0c;即让某元素的某些属性由一个值变到另一个值的过程。如让div的width属性由200px变到400px#xff0c;opacity属性由0.3变到1.0#xff0c;就是一个运动过程。 实现运… 好程序员技术教程分享JavaScript运动框架有需要的朋友可以参考下。 JavaScript的运动即让某元素的某些属性由一个值变到另一个值的过程。如让div的width属性由200px变到400pxopacity属性由0.3变到1.0就是一个运动过程。 实现运动要注意以下方面 匀速运动改变left、right、width、height、opacity等属性缓冲运动速度是变化的多物体运动注意所有东西都不能共用否则容易产生冲突如定时器timer获取任意属性值封装一个getStyle函数链式运动串行同时运动并行同时改变多个属性需要使用 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 flagtrue; //标志变量为true表示所有运动都到达目标值clearInterval(obj.timer);obj.timersetInterval(function(){flagtrue;for(var attr in json){//获取当前值var curr0;if(attropacity){currMath.round(parseFloat(getStyle(obj,attr))*100); //parseFloat可解析字符串返回浮点数//round四舍五入}else{currparseInt(getStyle(obj,attr)); //parseInt可解析字符串返回整数}//计算速度var speed(json[attr]-curr)/10;speedspeed0?Math.ceil(speed):Math.floor(speed);//检测是否停止if(curr!json[attr]){flagfalse; //有一个属性未达目标值就把flag变成false}if(attropacity){obj.style.filteralpha(opacity:(currspeed)); //针对IEobj.style.opacity(currspeed)/100; //针对Firefox和Chrome}else{obj.style[attr]currspeedpx;}}if(flag){clearInterval(obj.timer);if(callback){callback();}}},30);} 调用上述运动框架的实例var div_icondocument.getElementById(icon);var aListdiv_icon.getElementsByTagName(a);for(var i0;i aList[i].οnmοuseοverfunction(){ var _thisthis.getElementsByTagName(i)[0]; Move(_this,{top:-70,opacity:0},function(){ _this.style.top30px; Move(_this,{top:10,opacity:100}); }); }} 好了以上就是用JavaScript编写的运动框架。此外jQuery中的animate函数也可以方便实现上述功能$(function(){$(#icon a).mouseenter(function(){$(this).find(i).animate({top:-70px,opacity:0}, 300,function(){ //动画速度为300ms$(this).css({top:30px});$(this).animate({top:10px,opacity:1}, 200);});})})
