第10天-網(wǎng)頁特效bom入門、動畫原理

JavaScript語言基礎第一BOM基本概JavaScriptECMAScript、DOM、BOM（BrowserObjectModel）：BOMWindow對windowJavaScript 、alert()、console.log()這些都是window的屬性，其實BOM中基本所有的屬性和方法都是屬性window的。windowwindowwindow.onload（掌握window.onload事件會在窗體加載完成后執(zhí)行，通常我們稱之為函數(shù)window.window.onload=function(){//里面的代碼會在窗體加載完成后執(zhí)行。//窗體加載完成包括文檔樹的加載、//窗體加載完成包括文檔樹的加載、還有、文件的加載完成。}如果有加載，那么代碼一定要寫到window.onload里面，否則會出現(xiàn)沒有加載完成，獲取到<script><script>varimg.ge ementById("img");//瀏覽器會對頁面的加載做優(yōu)化，在加的時候，的引入會延遲//此時的已經(jīng)有了，但是卻沒有加載，//沒有被撐開，因此寬度現(xiàn)在還是console.log(img.width);</script>注意：如果同一個頁面中有多個window.open()打開一個窗////語法windowopenurl,name],features]);//參數(shù)1需要載入的url地址//參數(shù)2新窗口的名//_self:在當前窗口打開//_blank:在新的窗口打//參數(shù)3窗口的屬性，指定窗口的大小//返回值：會返回剛剛創(chuàng)建的那個窗口，用于關閉//示例：//示例：varnewWin=window.open("","_blank","width=300,height=300window.close()關閉窗newnewWinclose()；//newWin是剛剛創(chuàng)建的那個窗口window.close();//把當前窗口給關閉了定時器（重點延時定時器（了解設置延時定時器(////語法setTimeOutcallback,time);//參數(shù)1回調(diào)函數(shù)，時間到了就會執(zhí)行//參數(shù)2延時的時間//返回定時器的id，用于清除//示例vartimer=setTimeOut(function(){//1秒后將執(zhí)行的代碼},1000);////語法：clearTimeOuttimerId)//參數(shù)定時器id//示例clearclearTimeOut(timer);//清除上面定義的定時器間歇定時器（重點設置間歇定時器(////語法varintervalID=setIntervalfunc,delay);//參數(shù)1重復執(zhí)行的函//參數(shù)2每次延遲的毫秒數(shù)//返回定時器的id，用于清除//示例vartimer=setInterval(function(){//重復執(zhí)行的代碼。},1000);//語法：clearIntervalintervalID)//參數(shù)定時器id//示例clearInterval(timer);//清除上面定義的定時location對locationwindow的一個屬性，locationlocation的常用屬性和方法（了解locationlocationhref=“ht ”;//讓頁面跳轉(zhuǎn)到百度首頁locationlocationreloadtrue);//強制刷新，相當于ctrl+F5locationreloadfalse);//刷新，相當于F5locationconsoleconsolelogwindowlocationhash);/哈希值其實就是錨點consolelogwindowlocationhost);//服務器服務器名+端consolelogwindowlocationhostname);//服務器名console.log(window.location.pathname);//路徑console.log(window.location.port);//端口console.log(tocol);//協(xié)議console.log(window.location.search);//參數(shù)其他對navigator對象（了解window.navigator的一些屬性可以獲取客戶端的一些信userAgentnavigatornavigator.userAgent：瀏覽器版history對象（了解后后退history.history.back();historygo(-1前進：history.forward();history.go(1screen對象（了解consoleconsole.log(screen.width);//屏幕的寬度console.log(screen.height);//屏幕的高度console.log(screen.availWidth);//瀏覽器可占用的寬console.log(screen.availHeight);//瀏覽器可占用的高綜合練動offset系offset系列用于用于獲取元素自身的大小和位置，在網(wǎng)頁特效中有廣泛應offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetHeightoffsetHeightoffsetHeightoffsetWidthstyle.heightoffsetHeightoffsetWidth的構(gòu)成offsetHeightheightpaddnigborderoffsetWidth=width+padding+borderparentNodeoffsetParentparentNode始終是父元素offsetParent是離當前元素最近的定位元素(absolute、relative)，如果沒有，那就找offsetLeftoffsetLeft:自身左側(cè)到offsetParent左側(cè)的距離：left+margin-leftoffsetTop:自身頂部到offsetParent頂部的距離 offsetLeft與offsetParentstyle.left結(jié)offsetstyle.xxxMath對象復Math.Math.ceil();Math.floor();Math.round();Math.abs();動畫