在web开发过程中,有些时候任务重,事情多,很多动画效果大多不会再自己来实现,大部分都会使用自己曾经已经做好的动画效果。而为了使用起来快捷,大多都会将动画效果封装为函数,想要动画效果时便调用该动画效果的封装函数,在函数中传入相关参数就可以。因此,在这里为大家提供一些函数的封装。
一、获取DOM方法。由于通过类名获取DOM元素属于HTML5,因此具有兼容性,若想要兼容,则可以调用该方法。
//obj:标签/类名/ID名
function $(obj){
if(obj.charAt(0)=="."){//判断是否是类名,若是类名,则返回数组
var classname=obj.slice(1);
var arr=[];
var all=document.getElementsByTagName("*");
for(var i=0;i<all.length;i++){
if(all[i].className==classname){
arr.push(a[i]);
}
}
return arr;
}else if(obj.charAt(0)=="#"){//判断是否为ID名
return document.getElementById(obj.slice(1));
}else{//若不是类名或ID名,则为标签
return document.getElementsByTagName(obj);
}
}
二、横向缓动效果。使用于横向轮播图。
//缓速框架,使得DOM元素缓动到指定位置,水平方向
function animationX(obj,target,time){//obj:DOM元素 target:目标位置 time:间隔时间
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.offsetLeft)/10;//缓动速度
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj.style.left=obj.offsetLeft+speed+"px";
if(obj.offsetLeft==target){
clearInterval(obj.timer);
}
},time)
}
三、垂直缓动效果。适用于垂直轮播图。
//缓速框架,使得DOM元素缓动到指定位置,垂直方向
function animationY(obj,target,time){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj.style.top=obj.offsetTop+speed+"px";
if(obj.offsetTop==target){
clearInterval(obj.timer);
}
},time)
}
四、多属性缓动。
function animation(obj,json,fn){//obj:元素,json:属性列表,fn:回调函数
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
//json里面有几个属性就要执行几次
var target=0;//记录目标位置
var leader=0;//记录当前位置
var speed =0;//记录速度
for(var key in json){
if(key=='opacity'){
target = Math.round(json['opacity']*100)//0-100
leader = getStyle(obj,'opacity')*100//0-100
}
else{
target = parseInt(json[key]);
leader = parseInt(getStyle(obj,key));
}
speed = (target-leader)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
leader = leader + speed;//0-100
if(key=='opacity'){
obj.style.opacity = leader/100;
obj.style.filter = "alpha(opacity="+leader+")";
}
else if(key=="zIndex"){
obj.style.zIndex = json['zIndex'];
}
else{
obj.style[key] = leader+"px";
}
if(leader!=target){
flag = false
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},20)
}
//获取任意属性值
function getStyle(obj,attr){//obj:目标元素,attr:属性
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
五、获取浏览器可视区域宽高
function client(){
return{
"width":window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
"height":window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
}
六、获取卷曲的宽高
function scroll(){
return{
"top":document.documentElement.scrollTop+document.body.scrollTop,
"left":document.documentElement.scrollLeft+document.body.scrollLeft
}
}
七、事件监听
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn);
}else{
obj.attachEvent("on"+type,fn);
}
}