本文实例讲述了原生javascript运动函数的封装。分享给大家供大家参考，具体如下： //封装匀速运动//参数：// 1、dom对象// 2、样式属性（top，left，width，height，opacity等等）// 3、起始位置
本文实例讲述了原生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)<step){
currValue = endValue;
window.clearInterval(myTimer);
}
//3、改变外观
if(attr=="opacity"){
domObj.style[attr] = currValue;
}else{
domObj.style[attr] = currValue+"px";
}
},timeSpace);
}
//封装匀速运动
//参数：
// 1、dom对象
// 2、样式属性（top，left，width，height，opacity等等）
// 3、结束位置
// 4、时长：
//返回值
function moveObj02(domObj,attr,endValue,timeLong) {
let startValue = parseFloat(getStyle(domObj,attr));//??
let direction= endValue-startValue>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)<step){
currValue = endValue;
window.clearInterval(myTimer);
}
//3、改变外观
if(attr=="opacity"){
domObj.style[attr] = currValue;
}else{
domObj.style[attr] = currValue+"px";
}
},timeSpace);
}
//封装抛物线运动(右开口为例)
//参数：
// dom对象
// 起点
// 终点
// 总时长
//
//返回值：无
function parabola(domObj,startPoint,endPoint,timeLong,func){
//一、初始化
let offsetX = endPoint.x-startPoint.x;
let offsetY = endPoint.y-startPoint.y;
let p = (offsetY*offsetY)/(2*offsetX);
let left1 = 0;
domObj.style.left = startPoint.x+"px";
domObj.style.top = startPoint.y+"px";
let timeSpace = 10;
let step = Math.abs(endPoint.x-startPoint.x)/(timeLong/timeSpace) // endValue-startValue/步子数;//
//二、启动定时器
let myTimer = setInterval(function(){
//1、改变数据
left1=left1+step;
let top1=Math.sqrt(2*p*left1);
//2、判断边界
if(left1>=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)<step){
currValue = endValue;
window.clearInterval(myTimer);
func&&func();
}
//3、改变外观
domObjIn.style.opacity = currValue;
domObjOut.style.opacity = 1-currValue;
},timeSpace);
}
//多属性的运动
//参数：
// 1、dom对象
// 2、每个样式属性的结束值
// 4、时长：
//返回值
//调用示例：
/*
animate($("box"),{
"width":600,
"height":400,
"left":50
},2000)
*/
function animate(domObj,endObj,timeLong) {
// let startValue = parseFloat(getStyle(domObj,attr));//??
let startObj = {}
for(let key in endObj){
startObj[key] = parseFloat(getStyle(domObj,key));
}
// let direction= endValue-startValue>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])<stepObj[firstKey]){
for(let key in endObj){
currObj[key] = endObj[key];
}
window.clearInterval(myTimer);
}
//3、改变外观
for(let key in endObj){
if(key=="opacity"){
domObj.style[key] = currObj[key];
}else{
domObj.style[key] = currObj[key]+"px";
}
}
},timeSpace);
}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。