jQuery元素的尺寸、位置和頁面滾動事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>獲取尺寸</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ var $div = $(‘.box‘); /*盒子內容尺寸*/ console.log($div.width()); console.log($div.height()); /*盒子內容+padding*/ console.log($div.innerHeight()); console.log($div.innerWidth()); /*盒子真實尺寸，內容+padding+border*/ console.log($div.outerHeight()); console.log($div.outerWidth()); /*盒子真實尺寸+margin*/ console.log($div.outerHeight(true)); console.log($div.outerWidth(true)); }) </script>
<style type="text/css">
.box{
width: 300px;
height: 200px;
background-color: antiquewhite;
margin: 50px;
padding: 10px;
border: 1px solid #000;
}
</style></head>
<body>
<div class="box"></div></body>
</html>
2.獲取元素相對頁面的絕對位置：offset（）
$(function(){
var div = $(‘.box‘);
div.click(function(){
var oPos = $(‘.box‘).offset(); /*獲取頁面絕對位置*/
/*console.log(oPos);*/
document.title = oPos.left + ‘|‘ + oPos.top; /*更改標簽*/
})
})
例子：購物車
<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>購物車</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $car = $(‘.car‘);
var $count = $(‘.car em‘);
var $btn = $(‘.btn‘);
var $pot = $(‘.point‘);
var $w = $btn.outerWidth(); /*真實大小*/
var $h = $btn.outerHeight();
var $w01 = $car.outerWidth();
var $h01 = $car.outerHeight();
$btn.click(function(){
var carp = $car.offset();
var btnp = $btn.offset();
$pot.css({‘left‘:btnp.left+parseInt($w/2)-8,‘top‘:btnp.top+parseInt($h/2)-8}); /*計算絕對距離*/
$pot.show();
$pot.animate({‘left‘:carp.left+parseInt($w01/2)-8,‘top‘:carp.top+parseInt($h01/2)-8},500,function(){
$pot.hide();
var iNum = $count.html(); /*讀*/
$count.html(parseInt(iNum)+1); /*寫*/
});
/*$pot.hide();*/
})
})
</script><style type="text/css">
.car{ /*購物車*/
width: 150px;
height: 50px;
border: 2px solid #000;
line-height: 50px;
text-align: center;
float: right;
margin: 50px 100px 0 0;
}
.car em{ /*購物車商品數量*/
font-style: normal;
color: red;
font-weight: bold; /*設置文本粗細，bold加粗*/
}
.btn{ /*加入購物車按鈕*/
width: 100px;
height: 50px;
background-color: #F32914;
border: 0;
color: #fff;
margin: 50px 0 0 100px;
float: left;
}
.point{ /*小圓點*/
width: 16px;
height: 16px;
background-color: gold;
border-radius: 8px;
position: fixed;
left: 0;
top: 0;
z-index: 100;
display: none;
}
</style></head>
<body>
<div class="car">購物車<em>0</em></div>
<input type="button" name="" value="加入購物車" class="btn">
<div class="point"></div></body>
</html>
3.獲取瀏覽器可視寬度高度
4.獲取頁面文檔的寬度高度
$(function(){
/可視區屏幕範圍/
console.log(‘可視區寬度：‘+$(window).width());
console.log(‘可視區高度：‘+$(window).height());
/實際文本範圍/
console.log(‘text區寬度：‘+$(document).width());
console.log(‘text區高度：‘+$(document).height());
})
**5.獲取頁面滾動距離**/頁面滾動距離/
console.log(‘上滾動距離：‘+$(document).scrollTop());
console.log(‘左滾動距離：‘+$(document).scrollLeft());
**6.頁面滾動事件**<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滾動菜單</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $menu = $(‘.menu‘);
var $menub = $(‘.menu_back‘);
var $arrow = $(‘.arrow‘);
/*滾動事件*/
$(window).scroll(function(){
/*獲取滾動top值*/
var iNum = $(window).scrollTop();
if(iNum>200){
$menu.css({
‘position‘:‘fixed‘,
‘top‘:0,
/*設置定位後配置居中*/
‘left‘:‘50%‘,
‘marginLeft‘:-450,
});
$menub.show(); /*定位之後脫離文檔流，會導致下面的文檔突然消失，用一個相同的div代替*/
}
else{
$menu.css({
/*定位默認值，不定位，*/
‘position‘:‘static‘,
/*系統自動居中*/
‘margin‘:‘auto‘,
});
$menub.hide();
}
/*滾動一定距離才顯示*/
if(iNum>400){
$arrow.fadeIn();
}
else{
$arrow.fadeOut();
}
});
$arrow.click(function(){
/*兼容各個瀏覽器，body或者HTML*/
$(‘body,html‘).animate({‘scrollTop‘:0})
})
})
</script><style type="text/css">
.blank{
width: 900px;
height: 300px;
background-color: aqua;
margin: 0 auto;
}
.menu{
width: 900px;
height: 100px;
background-color: antiquewhite;
margin: 0 auto;
text-align: center;
line-height: 100px;
/*opacity: 0.3;*/
}
.menu_back{
width: 900px;
height: 100px;
margin: 0 auto;
display: none;
}
p{
color: red;
margin: 0 auto;
text-align: center;
}
.arrow{
width: 60px;
height: 60px;
background-color: #000000;
position: fixed;
right: 30px;
bottom: 50px;
text-align: center;
line-height: 60px;
font-size: 40px;
border-radius: 30px;
opacity: 0.5;
cursor: pointer;
display: none;
}
.arrow:hover{
opacity: 1;
}
</style></head>
<body>
<div class="blank"></div>
<div class="menu">菜單</div>
<div class="menu_back"></div>
<div class="arrow">
jQuery元素的尺寸、位置和頁面滾動事件