//獲取屏幕滾動的寬高
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";
}
}
