javascript中如何使用运动函数
今天就跟大家聊聊有关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中如何使用运动函数
网站URL:http://www.jxjierui.cn/article/poseig.html


咨询
建站咨询
