JavaScript变速动画函数封装添加任意多个属性

2023-08-25 03:04:05 222

下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性，具体代码如下所示：

common.js:

/**
*CreatedbyAdministratoron2018/8/18.
*/
/**
*CreatedbyAdministratoron2016/7/27.
*/
/**
*CreatedbyAdministratoron2016/7/21.
*
*次文件来自很牛x的程序员.
*
*作者:无名
*/
/*
*该函数是返回的是指定格式的日期,是字符串类型
*参数:date----日期
*返回值:字符串类型的日期
**/
functiongetDatetoString(date){
varstrDate;//存储日期的字符串
//获取年
varyear=date.getFullYear();
//获取月
varmonth=date.getMonth()+1;
//获取日
varday=date.getDate();
//获取小时
varhour=date.getHours();
//获取分钟
varminute=date.getMinutes();
//获取秒
varsecond=date.getSeconds();
hour=hour<10?"0"+hour:hour;
minute=minute<10?"0"+minute:minute;
second=second<10?"0"+second:second;
//拼接
strDate=year+"-"+month+"-"+day+""+hour+":"+minute+":"+second;//隐藏问题,关于变量声明的位置
returnstrDate;
}
//根据id获取元素对象
functionmy$(id){
returndocument.getElementById(id);
}
/*
*
*innerText属性IE中支持
*textContent火狐中支持
*dvObj.innerText="您好";设置innerText的值
*console.log(dvObj.innerText);获取innerText的值
*因为上述原因,inerText有时候需要设置值，有时候需要获取值
*所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用
*
*
**/
/*
*设置innerText属性的值
*element-----为某个元素设置属性值
*content-----设置的值
**/
functionsetInnerText(element,content){
if(typeofelement.textContent==="undefined"){
//IE浏览器
element.innerText=content;
}else{
element.textContent=content;
}
}
/*
*获取innerText属性的值
*element要获取的元素
*返回的是该元素的innerText值
**/
functiongetInnerText(element){
if(typeofelement.textContent==="undefined"){
//IE浏览器
returnelement.innerText;
}else{
returnelement.textContent;
}
}
//获取当前元素前一个元素
functiongetPreviousElement(element){
if(element.previousElementSibling){
returnelement.previousElementSibling;
}else{
varele=element.previousSibling;
while(ele&&ele.nodeType!==1){
ele=ele.previousSibling;
}
returnele;
}
}
//获取当前元素的后一个元素
functiongetNextElement(element){
if(element.nextElementSibling){
returnelement.nextElementSibling;
}else{
varele=element.nextSibling;
while(ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
returnele;
}
}
//获取父元素中的第一个元素
functiongetFirstElementByParent(parent){
if(parent.firstElementChild){
returnparent.firstElementChild;
}else{
varele=parent.firstChild;
while(ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
returnele;
}
}
//获取父元素中的最后一个元素
functiongetLastElementByParent(parent){
if(parent.lastElementChild){
returnparent.lastElementChild;
}else{
varele=parent.lastChild;
while(ele&&ele.nodeType!==1){
ele=ele.previousSibling;
}
returnele;
}
}
//获取兄弟元素
functiongetsiblings(ele){
if(!ele)return;//判断当前的ele这个元素是否存在
varelements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
varel=ele.previousSibling;//当前元素的前一个节点
while(el){
if(el.nodeType===1){//元素
elements.push(el);//加到数组中
}
el=el.previousSibling;
}
el=ele.nextSibling;
while(el){
if(el.nodeType===1){
elements.push(el);
}
el=el.nextSibling;
}
returnelements;
}
////能力检测多个浏览器为同一个对象注册多个事件
varEventTools={
//为对象添加注册事件
addEventListener:function(element,eventName,listener){
if(element.addEventListener){
element.addEventListener(eventName,listener,false);
}elseif(element.attachEvent){
element.attachEvent("on"+eventName,listener)
}else{
element["on"+eventName]=listener;
}
},
//为对象移除事件
removeEventListener:function(element,eventName,listener){
if(element.removeEventListener){
element.removeEventListener(eventName,listener,false);
}elseif(element.detachEvent){
element.detachEvent("on"+eventName,listener);
}else{
element["on"+eventName]=null;
}
},
//获取参数e
getEvent:function(e){
returne||window.event;
},
getPageX:function(e){
if(e.pageX){
returne.pageX;
}else{
//有的浏览器把高度设计在了文档的第一个元素中了
//有的浏览器把高度设计在了body中了
//document.documentElement.scrollTop;//文档的第一个元素
//document.body.scrollTop;
varscrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
returne.clientX+scrollLeft;
}
},
getPageY:function(e){
if(e.pageY){
returne.pageY;
}else{
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
returne.clientY+scrollTop;
}
}
};

补充：js变速动画函数

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
functiongetStyle(element,attr){
returnwindow.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}

//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度
//element元素json对象存储属性与值fn为回调函数
functionanimate(element,json,fn){
//清理定时器
clearInterval(element.timeid);
//设置定时器
element.timeid=setInterval(function(){
//假设全部到达目标
varf=true;
//循环去获取传入的数据
for(variinjson){
//判断传入的值是不是opacity
if(i=='opacity'){
//获取当前opacity的值并且放大100倍
varcurrent=getStyle(element,i)*100;
//把目标值也放大100倍
vartarget=json[i]*100;
//移动的步数
varstep=(target-current)/10;
//判断是不是为0
step=step>0?Math.ceil(step):Math.floor(step);
//移动后的位置
current+=step;
//移动元素属性
element.style[i]=current/100;
//判断属性是不是zIndex
}elseif(i=='zIndex'){
//直接设置zIndex
element.style[i]=json[i];
}else{
//普通属性获取（转化成数字）
varcurrent=parseInt(getStyle(element,i));
//目标属性值
vartarget=json[i]
//移动的步骤（渐变）
varstep=(target-current)/10;
//判断移动的值取整
step=step>0?Math.ceil(step):Math.floor(step);
//移动后的位置
current+=step;
//移动元素
element.style[i]=current+'px';
}
//只要有一个没达到目标就设置F为false
if(current!=target){
f=false;
}
//目标到达清理定时器判断有没有回调函数
if(f){
clearInterval(element.timeid);
if(fn){
fn();
}
}
}
console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
},20)
}

总结

以上所述是小编给大家介绍的JavaScript变速动画函数封装添加任意多个属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

JavaScript变速动画函数封装添加任意多个属性

热门推荐

随机推荐