原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
本文实例讲述了原生javascript运动函数的封装。分享给大家供大家参考，具体如下：
//封装匀速运动
//参数：
//1、dom对象
//2、样式属性（top，left，width，height，opacity等等）
//3、起始位置，结束位置
//4、速度：时间间隔，步长
//5、方向：
//返回值
functionmoveObj(domObj,attr,startValue,endValue,timeSpace,step,direction){
letcurrValue=startValue;
letmyTimer=setInterval(function(){
//1、改变数据
currValue=currValue+direction*step;
//2、判断边界
//if(currValue>=endValue){//??
//currValue=endValue;//??
//window.clearInterval(myTimer);
//}
if(Math.abs(currValue-endValue)0?1:-1;//??
lettimeSpace=10;
letstep=Math.abs(endValue-startValue)/(timeLong/timeSpace)//endValue-startValue/步子数;//
letcurrValue=startValue;
letmyTimer=setInterval(function(){
//1、改变数据
currValue=currValue+direction*step;
//2、判断边界
if(Math.abs(currValue-endValue)=offsetX){
left1=offsetX;
top1=Math.sqrt(2*p*left1);
window.clearInterval(myTimer);
if(func){
func();
}
}
//3、改变外观
domObj.style.left=left1+startPoint.x+"px";
domObj.style.top=top1+startPoint.y+"px";
},timeSpace);
}
//淡入：
//参数：
//dom对象
//时长；
//返回值：无
functionfadeIn(domObj,timeLong){
domObj.style.opacity=0;
moveObj02(domObj,"opacity",1,timeLong);
}
//淡出：
//参数：
//dom对象
//时长；
//返回值：无
functionfadeOut(domObj,timeLong){
domObj.style.opacity=1;
moveObj02(domObj,"opacity",0,timeLong);
}
//淡入和淡出：
//参数：
//domObjIn：淡入的dom对象
//domObjOut：淡出的dom对象
//时长；
//返回值：无
functionfadeInOut(domObjIn,domObjOut,timeLong,func){
domObjIn.style.opacity=0;
domObjOut.style.opacity=1;
letstartValue=0;
letendValue=1;
letdirection=1;
lettimeSpace=10;
letstep=Math.abs(endValue-startValue)/(timeLong/timeSpace)//endValue-startValue/步子数;//
letcurrValue=startValue;
letmyTimer=setInterval(function(){
//1、改变数据
currValue=currValue+direction*step;
//2、判断边界
if(Math.abs(currValue-endValue)0?1:-1;//??
letdirectionObj={};
for(letkeyinendObj){
directionObj[key]=endObj[key]>startObj[key]?1:-1;
}
lettimeSpace=10;
//letstep=Math.abs(endValue-startValue)/(timeLong/timeSpace)//endValue-startValue/步子数;//
letstepObj={};
for(letkeyinendObj){
stepObj[key]=Math.abs(endObj[key]-startObj[key])/(timeLong/timeSpace);
}
//letcurrValue=startValue;
letcurrObj={};
for(letkeyinendObj){
currObj[key]=startObj[key];
}
letmyTimer=setInterval(function(){
//1、改变数据
//currValue=currValue+direction*step;
for(letkeyinendObj){
currObj[key]=currObj[key]+directionObj[key]*stepObj[key];
}
//2、判断边界
letfirstKey=Object.keys(endObj)[0];
if(Math.abs(currObj[firstKey]-endObj[firstKey])
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。