滾動(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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市竞帽,隨后出現(xiàn)的幾起案子炫加,更是在濱河造成了極大的恐慌,老刑警劉巖泻轰,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件技肩,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡浮声,警方通過(guò)查閱死者的電腦和手機(jī)虚婿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)阿蝶,“玉大人雳锋,你說(shuō)我怎么就攤上這事∠劢啵” “怎么了玷过?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)筑煮。 經(jīng)常有香客問(wèn)我辛蚊,道長(zhǎng),這世上最難降的妖魔是什么真仲? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任袋马,我火速辦了婚禮,結(jié)果婚禮上秸应,老公的妹妹穿的比我還像新娘虑凛。我一直安慰自己,他們只是感情好软啼,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布桑谍。 她就那樣靜靜地躺著,像睡著了一般祸挪。 火紅的嫁衣襯著肌膚如雪锣披。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天贿条,我揣著相機(jī)與錄音雹仿,去河邊找鬼。 笑死整以,一個(gè)胖子當(dāng)著我的面吹牛胧辽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悄蕾,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼票顾,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼础浮!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起奠骄,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤豆同,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后含鳞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體影锈,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年蝉绷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鸭廷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡熔吗,死狀恐怖辆床,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情桅狠,我是刑警寧澤讼载,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站中跌,受9級(jí)特大地震影響咨堤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜漩符,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一一喘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嗜暴,春花似錦凸克、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至狐赡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間疟丙,已是汗流浹背颖侄。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留享郊,地道東北人览祖。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像炊琉,于是被迫代替她去往敵國(guó)和親展蒂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子又活,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • /** Created by Administrator on 2017/4/26.*/ /** 勻速運(yùn)動(dòng)框架 @...
    康軒閱讀 121評(píng)論 0 0
  • 事件源對(duì)象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 874評(píng)論 0 0
  • 這是2012年開發(fā)的網(wǎng)站 , 為自己做個(gè)筆記锰悼。里面當(dāng)時(shí)封裝了好多方法 http://www.cphi.cn/fil...
    github加星點(diǎn)進(jìn)來(lái)閱讀 424評(píng)論 0 1
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象柳骄,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建箕般,需要時(shí)才創(chuàng)建 最常見的單例模式耐薯,...
    Obeing閱讀 2,058評(píng)論 1 10
  • 以下是常用的代碼收集,學(xué)習(xí)用丝里。轉(zhuǎn)自豪情博客園 1. PC - js 返回指定范圍的隨機(jī)數(shù)(m-n之間)的公式 re...
    自由加咖啡閱讀 993評(píng)論 0 1