滾動(dòng)距離/屏幕寬高/勻速動(dòng)畫/緩速動(dòng)畫

//獲取屏幕滾動(dòng)的寬高

functionscroll() {

//判斷是否是ie以及新的版本

if(window.pageXOffset!=null){

//返回一個(gè)字典

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

}

}

//勻速動(dòng)畫

functionconstant(obj,speed,target) {

//觸發(fā)動(dòng)畫

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)

}

//抽取緩動(dòng)動(dòng)畫函數(shù)

//當(dāng)上一次動(dòng)畫完成后,我需要做一些事情,例如,讓盒子回到原來(lái)的位置和大小

//動(dòng)畫回調(diào):當(dāng)動(dòng)畫完成后,我們做一些事情,使用函數(shù):fn

functionbuffer(obj,json,fn) {

clearInterval(obj.timer);

//用字典來(lái)封裝多個(gè)值,屬性作為key,target作為value

//多值動(dòng)畫不能保證每一個(gè)動(dòng)畫同事到達(dá)對(duì)應(yīng)的目標(biāo)值

obj.timer=setInterval(function() {

//定義一個(gè)標(biāo)簽用來(lái)記錄是否清空定時(shí)器

varflag=true;

varbegin=0;

vartarget=0;

//json中有多個(gè)key-value,所以獲取的begin值有多個(gè),需要使用循環(huán),來(lái)獲取多個(gè)值

for(varkeyinjson) {

//判斷如果是透明度,begin以及target需要重新設(shè)置

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;

//取出一個(gè)絕對(duì)值比較大的整數(shù),如果速度是負(fù)值,那么應(yīng)該向下取整

//判斷速度是正值還是負(fù)值

speed=target>begin?Math.ceil(speed):Math.floor(speed);

//當(dāng)設(shè)置值得時(shí)候,也需要判斷

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';

}

//判斷什么時(shí)候清空定時(shí)器

if(begin!=target) {//只要一個(gè)值,到了目標(biāo)值就清空定時(shí)器

flag=false;

}

}

//判斷是否清空定時(shí)器

if(flag==true){

clearInterval(obj.timer);

if(fn){

fn();

}

}

},80);

}

functiongetcssAttr(obj,attr) {

//如果一個(gè)屬性值,我們通過(guò).語(yǔ)法拿不到,就用[]

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";

}

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容