//获取屏幕滚动的宽高
functionscroll() {
//判断是否是ie以及新的版本
if(window.pageXOffset!=null){
//返回一个字典
return{
top:window.pageYOffset,
left:window.pageXOffset
}
}else if(document.compatMode=='CSS1Compat'){//是否是火狐以及符合w3c
return{
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}
return{
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
//获取可是窗口的宽高
functionclient() {
if(window.innerWidth){//ie9以及新的浏览器
return{
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode=='CSS1Compat'){//符合w3c
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
return{
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
//匀速动画
functionconstant(obj,speed,target) {
//触发动画
clearInterval(obj.timer);
obj.timer=setInterval(function() {
varmySpeed=target>obj.offsetLeft?speed:-speed;
obj.style.left=obj.offsetLeft+mySpeed+'px';
if(Math.abs(target-obj.offsetLeft)
clearInterval(obj.timer);
obj.style.left=target+'px';
}
},20)
}
//抽取缓动动画函数
//当上一次动画完成后,我需要做一些事情,例如,让盒子回到原来的位置和大小
//动画回调:当动画完成后,我们做一些事情,使用函数:fn
functionbuffer(obj,json,fn) {
clearInterval(obj.timer);
//用字典来封装多个值,属性作为key,target作为value
//多值动画不能保证每一个动画同事到达对应的目标值
obj.timer=setInterval(function() {
//定义一个标签用来记录是否清空定时器
varflag=true;
varbegin=0;
vartarget=0;
//json中有多个key-value,所以获取的begin值有多个,需要使用循环,来获取多个值
for(varkeyinjson) {
//判断如果是透明度,begin以及target需要重新设置
if('opacity'==key){
begin=parseInt(parseFloat(getcssAttr(obj,key))*100)||100;
target=parseInt(json[key]*100);
}else if('scrollTop'==key){
begin=obj.scrollTop;
target=json[key];
}
else{
begin=parseInt(getcssAttr(obj,key))||0;
target=parseInt(json[key]);
}
varspeed=(target-begin)*0.2;
//取出一个绝对值比较大的整数,如果速度是负值,那么应该向下取整
//判断速度是正值还是负值
speed=target>begin?Math.ceil(speed):Math.floor(speed);
//当设置值得时候,也需要判断
if('opacity'==key){
//普通浏览器
obj.style.opacity=(begin+speed)/100;
//ie
obj.style.filter='alpha(opacity:'+(begin+speed)+')';
}else if('zIndex'==key){
obj.style[key]=json[key];
}else if('scrollTop'==key){
obj.scrollTop=begin+speed;
}
else{
obj.style[key]=begin+speed+'px';
}
//判断什么时候清空定时器
if(begin!=target) {//只要一个值,到了目标值就清空定时器
flag=false;
}
}
//判断是否清空定时器
if(flag==true){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},80);
}
functiongetcssAttr(obj,attr) {
//如果一个属性值,我们通过.语法拿不到,就用[]
if(obj.currentStyle){
returnobj.currentStyle[attr];
}else{
returnwindow.getComputedStyle(obj,null)[attr];
}
}
/*
* 判断浏览器
*/
functiongetOs() {
varOsObject="";
if(isIE=navigator.userAgent.indexOf("MSIE")!= -1) {
return"MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")!= -1) {
return"Firefox";
}
if(isChrome=navigator.userAgent.indexOf("Chrome")!= -1) {
return"Chrome";
}
if(isSafari=navigator.userAgent.indexOf("Safari")!= -1) {
return"Safari";
}
if(isOpera=navigator.userAgent.indexOf("Opera")!= -1) {
return"Opera";
}
}
