jQuery元素的尺寸位置和页面滚动事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery元素的尺寸位置和页面滚动事件相关的知识，希望对你有一定的参考价值。
1.获取和设置元素的尺寸
<!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元素的尺寸位置和页面滚动事件的主要内容，如果未能解决你的问题，请参考以下文章