JS和jQuery寬高詳解（下篇）

標籤：技術分享   pos   alert   瀏覽器   jquer   時間   用法   window   out   

jQuery相關的寬高

和JS相比，jQuery就像親媽一樣，JS就是後媽，哈哈哈哈哈～～～～～～總之，jQuery對很多有關相容的問題進行封裝，只有極少一部分屬性需要考慮相容，用起來非常滴方便～～

與jQuery相關的寬高：

.width()與.height()；

.innerWidth()與 .innerHeight();

.outerWidth() 與.outerHeight();

上邊3對是jQuery裡寬高相關的屬性；下邊3對是與寬高相關的屬性。

 

 

.scrollTop() 與.scrollLeft(); 

.offset().top 與.offset().left;

.position().top 與position().left;

 

.width()與.height()  這一對屬性如，對於window對象和document對象特殊元素唯讀不能寫，而對於普通元素是可以傳值也可以是函數。 

 

 

width()的區別css(‘width‘)，前者反回的值是有單位的，而後者返回的值是沒有單位的。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 

.innerWidth()與 .innerHeight(); 這兩個屬性是包括padding的值；用法和width()相同

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 

.outerWidth()與 .outerHeight(); 這兩個屬性包括border和margin的寬度；用法和width()相同

 

這兩個屬性通過設定true和false取得element是否包括margin，如果是true則包括margin，如果是false則不包括。

 

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 

 .scrollTop() 與.scrollLeft() 這兩個屬性和JS裡scroll Top與scrollLeft相同都是指捲軸捲起的那部分

 ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 

 offset()裡.offset().top 與.offset().left;

 ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～  

.position()裡 .position().top 與position().left;

 

 

 

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～  

jQuery裡相關的寬高上邊已介紹完畢，下邊看一下使用jQuery實現可視地區、捲軸滾動到瀏覽器地段和頂端

 

jQuery實現可視地區,實現原理和JS的相同，只是在擷取相關的值時有區別,這裡只給出jQuery代碼，CSS和HTML參考JS

<script>

$(window).scroll(function(){

var ks_arear_H = $(window).height();

var scroll_top = $(window).scrollTop();

var div_top = $(‘#show_div‘).offset().top;

//console.log(ks_arear_H);

//console.log(scroll_top);

//console.log(div_top);

if(ks_arear_H+scroll_top <= div_top){

$(‘#show_div‘).addClass(‘fadein_left‘);

}

});

</script>

 

 

jQuery捲軸滾動到瀏覽器地段和頂端

<script>

$(window).scroll(function(){

var ks_arear = $(window).height();

var scrollTop = $(window).scrollTop();

var wholeHeight = $(document).height();

if(ks_arear+scrollTop >= wholeHeight){

alert(‘滾動到低部哦～～‘);

}

if(scrollTop == 0){

alert(‘滾動到頂部了哦～～～‘);

}

});

</script>

_____________________________________________________________________________________________

JS和jQuery相關的寬高到此結束，雖然整理一些知識點需要花費一些時間和精力，但是在整理的同時也是一個系統學習的過程。所以還是有必要滴??

 

 

JS和jQuery寬高詳解（下篇）