-
BOM (Brother Object Model)
查看全部 -
jskfj.fdfdfsg.ffdfgdfg; dfgdfgdf.dffgsfsdf sdgdfg.fgdfsdfs
查看全部 -
window.onload function() 加載完網頁執行
var imgWidth = imgs[0].offsetWidth;通過offsetWidth可以獲得圖片的寬度；offsetWidth 屬于dom樣式設置的內容
parseInt(imgs[j].style.left,10) imgs[j].style.left的值含有單位px不能直接數值運算，需要先轉化為數字，通過parseInt()來進行轉化
查看全部 -
塊 塊。。。。。內聯 內聯
查看全部 -
dom節點繼承層次多，dom操作耗費性能，故將dom操作轉交框架內部，精細化操作，虛擬dom，mvvm框架
查看全部 -
window.onload，頁面全部加載完成后觸發函數，
DOMReady實現策略，第二點符合jquery的DOMReady思路
查看全部 -
藍色部分設計大量計算
查看全部 -
html結構的渲染過程，外部資源的加載貫穿始終
查看全部 -
attrNode=divNode.attributes[0];/獲取第一個屬性節點
divNode.childNodes[0];/獲取元素節點的第一個子節點；子節點按html上的順序排列，注意空格屬于文檔節點
document.doctype;/獲取doctype節點對象
所有節點都具有nodeName和nodeValue屬性
查看全部 -
。IE的notetype屬性值只支持數值常量
查看全部 -
什么是dom，為什么使用dom，dom級別，瀏覽器對dom的支持
查看全部 -
d發順豐到付
查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> ????<style> ?#box?{ ????????????width:?1000px; ?height:?300px; ?border:?1px?solid?#ccc; ?position:?relative; ?overflow:?hidden; ?} ????????#box?div?{ ????????????width:?400px; ?height:?300px; ?background-color:?orangered; ?position:?absolute; ?background-image:?url("1.jpg"); ?} ????????#box?div:nth-child(2)?{ ????????????left:?400px; ?background-color:?#ccc; ?background-image:?url("2.jpg"); ?} ????????#box?div:nth-child(3)?{ ????????????left:?600px; ?background-color:?red; ?background-image:?url("3.jpg"); ?} ????????#box?div:nth-child(4)?{ ????????????left:?800px; ?background-color:?pink; ?background-image:?url("4.jpg"); ?} ????</style> </head> <body> <div?id="box"> ????<div></div> ????<div></div> ????<div></div> ????<div></div> </div> </body> <script> ?window.onload?=?function?()?{ ?//獲取事件源 ?var?box?=?document.getElementById('box') ?var?divs?=?box.querySelectorAll('div') ?var?left?=?[ ????????????{left:?0}, ????????????{left:?200}, ????????????{left:?400}, ????????????{left:?600} ????????] ?var?previous?=?[ ????????????{left:?0}, ????????????{left:?400}, ????????????{left:?600}, ????????????{left:?800} ????????] ?for?(var?i?=?0;?i?<?divs.length;?i++)?{ ?divs[i].index?=?i ?//注冊事件??鼠標經過時當前圖片時且前面的圖片都會移動到目標位置 ?divs[i].onmouseover?=?function?()?{ ?var?index?=?this.index ?for?(var?i?=?1;?i?<=?index;?i++)?{ ?animate(divs[i],?left[i]) ????????????????} ????????????} ?//鼠標離開時復位到目標位置?如果鼠標移動到后面的圖片不會復位(因為觸發onmouseover事件后目標位置就是當前位置) ?divs[i].onmouseout?=?function?()?{ ?var?index?=?this.index ?for?(var?i?=?1;?i?<=?index;?i++)?{ ?animate(divs[i],?previous[i]) ????????????????} ????????????} ????????} ?//給事件源注冊事件 ?/** ?????????*?封裝一個animate函數 ?*?@param?o ?????????*?@param?json ?????????*?@param?fn ?????????*/ ?function?animate(o,?json,?fn)?{ ?if?(o.timeId)?{ ?clearInterval(o.timeId)?//清除定時器,保證只有一個定時器在運行 ?} ?o.timeId?=?setInterval(function?()?{ ?var?flag?=?true ????????????????for?(var?key?in?json)?{ ?if?(key?==?'opacity')?{ ?var?leader?=?parseInt(getAttr(o,?key)?*?100?||?0)//先放大100倍,這樣才能保證步長至少為1px才有效 ?var?target?=?parseInt(json[key]?*?100) ?var?step?=?(target?-?leader)?/?10 ?step?=?step?>?0???Math.ceil(step)?:?Math.floor(step) ?leader?+=?step ?o.style.opacity?=?leader?/?100??//計算后除于100即可 ?}?else?if?(key?==?'zIndex')?{ ?o.style.zIndex?=?json[key]?//直接設置為目標層級即可,無需步進 ?}?else?{ ?var?leader?=?parseInt(getAttr(o,?key))?//只保留整數 ?var?target?=?parseInt(json[key])?//只保留整數 ?var?step?=?(target?-?leader)?/?5 ?step?=?step?>?0???Math.ceil(step)?:?Math.floor(step) ?leader?+=?step ?o.style[key]?=?leader?+?'px' ?} ?if?(target?!=?leader)?{?//只要有一個屬性沒有到達目標位置??flag就為假??開關思想 ?flag?=?false ?} ????????????????} ?if?(flag)?{ ?clearInterval(o.timeId) ?if?(typeof?fn?==?'function')?{?//如果參數是函數就調函數 ?fn() ????????????????????} ????????????????} ????????????},?15) ????????} ?function?getAttr(o,?attr)?{ ?if?(o.currentStyle)?{ ?return?o.currentStyle[attr] ????????????}?else?{ ?return?window.getComputedStyle(o,?null)[attr] ????????????} ????????} ????} </script> </html>查看全部 -
DOM處在賦予JS動態交互和效果能力的核心地位
查看全部 -
DOM處在賦予JS動態交互和效果能力的核心地位
查看全部
舉報
0/150
提交
取消