今天就跟大家聊聊有关javascript中如何使用运动函数,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
目前创新互联已为超过千家的企业提供了网站建设、域名、网站空间、绵阳服务器托管、企业网站设计、山海关网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
具体如下:
//封装匀速运动 //参数: // 1、dom对象 // 2、样式属性(top,left,width,height,opacity等等) // 3、起始位置,结束位置 // 4、速度:时间间隔,步长 // 5、方向: //返回值 function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) { let currValue = startValue; let myTimer = setInterval(function(){ //1、改变数据 currValue = currValue+direction*step; //2、判断边界 // if(currValue>=endValue){//?? // currValue = endValue;//?? // window.clearInterval(myTimer); // } if(Math.abs(currValue-endValue)0?1:-1;//?? let timeSpace = 10; let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子数;// let currValue = startValue; let myTimer = 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对象 // 时长; //返回值:无 function fadeIn(domObj,timeLong){ domObj.style.opacity = 0; moveObj02(domObj,"opacity",1,timeLong); } //淡出: //参数: // dom对象 // 时长; //返回值:无 function fadeOut(domObj,timeLong){ domObj.style.opacity = 1; moveObj02(domObj,"opacity",0,timeLong); } //淡入和淡出: //参数: // domObjIn:淡入的dom对象 // domObjOut:淡出的dom对象 // 时长; //返回值:无 function fadeInOut(domObjIn,domObjOut,timeLong,func){ domObjIn.style.opacity = 0; domObjOut.style.opacity = 1; let startValue = 0; let endValue = 1; let direction= 1; let timeSpace = 10; let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子数;// let currValue = startValue; let myTimer = setInterval(function(){ //1、改变数据 currValue = currValue+direction*step; //2、判断边界 if(Math.abs(currValue-endValue) 0?1:-1;//?? let directionObj = {}; for(let key in endObj){ directionObj[key] = endObj[key]>startObj[key]?1:-1; } let timeSpace = 10; // let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子数;// let stepObj = {}; for(let key in endObj){ stepObj[key] = Math.abs(endObj[key]-startObj[key] )/(timeLong/timeSpace); } //let currValue = startValue; let currObj = {}; for(let key in endObj){ currObj[key] = startObj[key]; } let myTimer = setInterval(function(){ //1、改变数据 //currValue = currValue+direction*step; for(let key in endObj){ currObj[key] = currObj[key]+directionObj[key]*stepObj[key]; } //2、判断边界 let firstKey = Object.keys(endObj)[0]; if(Math.abs(currObj[firstKey]-endObj[firstKey]) 看完上述内容,你们对javascript中如何使用运动函数有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
文章名称:javascript中如何使用运动函数
文章出自:http://bjjierui.cn/article/poseig.html