標籤：
1.
offsetParent 擷取的最近的定位的父元素
offsetLeft/offsetTop 是相對於offsetParent的距離
offsetHeight/offsetWidth 擷取盒子的大小 border + height + padding
<style> #box { width: 200px; height: 200px; background-color: #ff0000; } #child { width: 100px; height: 100px; margin-left: 10px; background-color: #00ff00; } </style></head><body> <!--offsetParent--> <div id="box"> <div id="child"> </div> </div> <script> var child = document.getElementById("child"); //border + padding + width //offsetLeft擷取的是相對於offsetParent的距離 console.log(child.offsetLeft); //如果設定的子盒子有定位的父元素，offsetParent就是定位的父元素 //此處子盒子的父元素沒有定位，offsetParent就是body console.log(child.offsetParent); //父節點--box console.log(child.parentNode); </script>
2 scrollHeight 滾動內容的高度（height + padding 不包括邊框）
<style> #box{ width: 100px; height: 100px; background-color: #0000ff; } </style></head><body><div id="box"> 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈</div><script> function $$(id){ return document.getElementById(id); }</script><script> var box=$$("box"); console.log(box.scrollHeight); //擷取撐開的大小 console.log(box.offsetHeight); //擷取盒子的大小</script>
註冊 onscroll 滾動事件
<script>// var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//捲軸事件 window.onscroll=function(){ console.log(scroll().scrollTop); }</script>
//4 擷取頁面滾動出去的距離
//document.body.scrollLeft ||document.documentElement.scrollLeft
//document.body.scrollTop ||document.documentElement.scrollTop
這裡會產生瀏覽器的相容問題，ie8記一下版本不支援document.body.scrollLeft,只支援document.documentElement.scrollLeft因此我們需要封裝這個函數
/**scrollTop與scrollLeft相容性封裝 * * @returns {{scrollTop: number, scrollLeft: number}} */function scroll(){ return{ scrollTop:document.body.scrollTop||document.documentElement.scrollTop, scrollLeft:document.body.scrollLeft||document.documentElement.scrollLeft };}
動畫函數的封裝
//擷取任意樣式function getStyle(element, attr) { if(window.getComputedStyle) { return window.getComputedStyle(element,null)[attr]; }else{ return element.currentStyle[attr]; }}//在修改單個屬性的基礎上修改//1 修改參數，傳入對象//2 遍曆對象，擷取到所有的屬性//3 把target修改 成 attrs[attr]function animate(element, attrs, fn) { //清除定時器 if(element.timerId) { clearInterval(element.timerId); } element.timerId = setInterval(function () { //問題：當多個屬性的最小值到達之後，動畫就會停止 //解決：當所有屬性都到達目標值，動畫停止 //假設所有的屬性都到達目標值，停止定時器 var isStop = true; //遍曆多個屬性 for(var attr in attrs) { if(attr === "zIndex") { element.style[attr] = attrs[attr]; }else if(attr === "opacity") { //擷取當前元素樣式屬性的值 var current = parseFloat(getStyle(element, attr)) || 0; current *= 100; //每一次step的值會越來越小 var step = (attrs[attr]*100 - current)/8; //三目運算子判斷步長為正數向上取整 如果為負數向下取整 step = step > 0 ? Math.ceil(step): Math.floor(step); current += step; element.style[attr] = current/100; //更改ie下的透明度（透明度的相容問題） element.style.filter = "alpha(opacity="+ current +")"; //如果有一個屬性沒有到達目標值，不能停止動畫 if(step != 0) { isStop = false; } }else{ //擷取當前元素樣式屬性的值 var current = parseInt(getStyle(element, attr)) || 0; //每一次step的值會越來越小 var step = (attrs[attr] - current)/8; //正數 向上取整 負數 向下取整 step = step > 0 ? Math.ceil(step): Math.floor(step); current += step; element.style[attr] = current + "px"; //如果有一個屬性沒有到達目標值，不能停止動畫 if(step != 0) { isStop = false; } } } //停止定時器
js-特效部分學習-offsetParent、scrollHeight 、動畫函數的封裝
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
