1.獲取和設(shè)置元素的尺寸
永清ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:13518219792(備注:SSL證書合作)期待與您的合作!
獲取尺寸
$(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());
/*盒子真實尺寸,內(nèi)容+padding+border*/
console.log($div.outerHeight());
console.log($div.outerWidth());
/*盒子真實尺寸+margin*/
console.log($div.outerHeight(true));
console.log($div.outerWidth(true));
})
.box{
width: 300px;
height: 200px;
background-color: antiquewhite;
margin: 50px;
padding: 10px;
border: 1px solid #000;
}
2.獲取元素相對頁面的絕對位置:offset()
$(function(){
var div = $('.box');
div.click(function(){
var oPos = $('.box').offset(); /*獲取頁面絕對位置*/
/*console.log(oPos);*/
document.title = oPos.left + '|' + oPos.top; /*更改標(biāo)簽*/
})
})
例子:購物車
購物車
$(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();*/
})
})
.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è)置文本粗細,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;
}
購物車0
3.獲取瀏覽器可視寬度高度
4.獲取頁面文檔的寬度高度
$(function(){
/可視區(qū)屏幕范圍/
console.log('可視區(qū)寬度:'+$(window).width());
console.log('可視區(qū)高度:'+$(window).height());
/實際文本范圍/
console.log('text區(qū)寬度:'+$(document).width());
console.log('text區(qū)高度:'+$(document).height());
})
**5.獲取頁面滾動距離**
/頁面滾動距離/
console.log('上滾動距離:'+$(document).scrollTop());
console.log('左滾動距離:'+$(document).scrollLeft());
**6.頁面滾動事件**
滾動菜單
$(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,
/*設(shè)置定位后配置居中*/
'left':'50%',
'marginLeft':-450,
});
$menub.show(); /*定位之后脫離文檔流,會導(dǎo)致下面的文檔突然消失,用一個相同的div代替*/
}
else{
$menu.css({
/*定位默認值,不定位,*/
'position':'static',
/*系統(tǒng)自動居中*/
'margin':'auto',
});
$menub.hide();
}
/*滾動一定距離才顯示*/
if(iNum>400){
$arrow.fadeIn();
}
else{
$arrow.fadeOut();
}
});
$arrow.click(function(){
/*兼容各個瀏覽器,body或者HTML*/
$('body,html').animate({'scrollTop':0})
})
})
.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;
}