您好,登錄后才能下訂單哦!
1.獲取和設(shè)置元素的尺寸
<!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');
/*盒子內(nèi)容尺寸*/
console.log($div.width());
console.log($div.height());
/*盒子內(nèi)容+padding*/
console.log($div.innerHeight());
console.log($div.innerWidth());
/*盒子真實(shí)尺寸,內(nèi)容+padding+border*/
console.log($div.outerHeight());
console.log($div.outerWidth());
/*盒子真實(shí)尺寸+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; /*更改標(biāo)簽*/
})
})
例子:購物車
<!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(); /*真實(shí)大小*/
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}); /*計(jì)算絕對距離*/
$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{ /*購物車商品數(shù)量*/
font-style: normal;
color: red;
font-weight: bold; /*設(shè)置文本粗細(xì),bold加粗*/
}
.btn{ /*加入購物車按鈕*/
width: 100px;
height: 50px;
background-color: #F32914;
border: 0;
color: #fff;
margin: 50px 0 0 100px;
float: left;
}
.point{ /*小圓點(diǎn)*/
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(){
/可視區(qū)屏幕范圍/
console.log('可視區(qū)寬度:'+$(window).width());
console.log('可視區(qū)高度:'+$(window).height());
/實(shí)際文本范圍/
console.log('text區(qū)寬度:'+$(document).width());
console.log('text區(qū)高度:'+$(document).height());
})
**5.獲取頁面滾動(dòng)距離**
/頁面滾動(dòng)距離/
console.log('上滾動(dòng)距離:'+$(document).scrollTop());
console.log('左滾動(dòng)距離:'+$(document).scrollLeft());
**6.頁面滾動(dòng)事件**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滾動(dòng)菜單</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');
/*滾動(dòng)事件*/
$(window).scroll(function(){
/*獲取滾動(dòng)top值*/
var iNum = $(window).scrollTop();
if(iNum>200){
$menu.css({
'position':'fixed',
'top':0,
/*設(shè)置定位后配置居中*/
'left':'50%',
'marginLeft':-450,
});
$menub.show(); /*定位之后脫離文檔流,會導(dǎo)致下面的文檔突然消失,用一個(gè)相同的div代替*/
}
else{
$menu.css({
/*定位默認(rèn)值,不定位,*/
'position':'static',
/*系統(tǒng)自動(dòng)居中*/
'margin':'auto',
});
$menub.hide();
}
/*滾動(dòng)一定距離才顯示*/
if(iNum>400){
$arrow.fadeIn();
}
else{
$arrow.fadeOut();
}
});
$arrow.click(function(){
/*兼容各個(gè)瀏覽器,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">
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。