jQuery 尺寸相关、滚动事件
- 1、获取和设置元素的尺寸
- 2、获取元素相对页面的绝对位置
- 3、实现添加购物车动画效果
- 4、 获取浏览器可视区宽度高度、获取页面文档的宽度高度、获取页面滚动距离
- 1、获取浏览器可视区宽度高度
- 2、获取页面文档的宽度高度
- 3、获取页面滚动距离
- 6、页面滚动事件
1、获取和设置元素的尺寸
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素的尺寸</title>
<style type="text/css">
.box{
width: 200px;
height: 250px;
padding: 20px;
border: 10px solid gold;
margin: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// 获取元素width和heigh
var width = $('.box').width();
var height = $('.box').height();
console.log('元素的width:',width,'元素的height：',height)
// 包括padding的width和height
var innerWidth = $('.box').innerWidth();
var innerHeight = $('.box').innerHeight();
console.log('包括padding的width：',innerWidth,'包括padding的height：',innerHeight)
// 包括padding和border的width和height
var outerWidth = $('.box').outerWidth();
var outerHeight = $('.box').outerHeight();
console.log('包括padding和border的width：',outerWidth,'包括padding和border的height：',outerHeight)
// 包括padding和border以及margin的width和height
var outerWidth_margin = $('.box').outerWidth(true);
var outerHeight_margin = $('.box').outerHeight(true);
console.log('包括padding和border以及margin的width：',outerWidth_margin,'包括padding和border以及margin的height：',outerHeight_margin)
})
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>显示效果如下：
2、获取元素相对页面的绝对位置
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素相对页面的绝对位置</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $box = $('.box');
var offset = $box.offset(); // 得到的是一个对象，有top与left属性
console.log(offset)
console.log(offset.top, offset.left)
// 将内容打在标签上
document.title = offset.top + '|' + offset.left
})
</script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>显示效果如下：
3、实现添加购物车动画效果
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>加入购物车动画</title>
<style type="text/css">
.chart{
width: 150px;
height: 50px;
border: 2px solid #000000;
float: right;
text-align: center;
line-height: 50px;
margin-top: 100px;
margin-right: 100px;
border-radius: 5px;
}
.chart em{
font-style: normal;
color: red;
}
.add{
width: 100px;
height: 50px;
background-color: green;
border: 0;
float:left;
position: fixed;
font-weight: bold;
left: 50%;
bottom: 0%;
margin-left: -50px;
border-radius: 10px;
color: white;
}
.point{
width: 16px;
height: 16px;
background-color: red;
position: fixed;
left: 0;
top: 0;
border-radius: 2px;
z-index: 9999;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $chart = $('.chart');
var $count = $('.chart em'); // 商品统计
var $btn = $('.add'); // 添加购物车
var $point = $('.point');
$btn.click(function () {
var offset = $btn.offset(); // 获取元素的位置
var offset1 = $count.offset();
var outerWidth = $btn.outerWidth(); //包括padding和border的width
var outerHeight = $btn.outerHeight(); //包括padding和border的height
var outerWidth1 = $point.outerWidth();
var outerHeight1 = $point.outerHeight();
$point.css({'top':offset.top+parseInt(outerHeight/2)-parseInt(outerWidth1/2),
'left':offset.left+parseInt(outerWidth/2)-parseInt(outerHeight1/2)})
$point.show();// 默认是隐藏，点击后显示
// 得到购物车相关元素的位置
var chart_position = $chart.offset();
// 红点在购物车中的位置
var in_chart_w = $chart.outerWidth()/2;
var in_chart_h = $chart.outerHeight()/2;
$point.stop().animate({left: chart_position.left+parseInt(in_chart_w)-parseInt(outerHeight1/2),
top:chart_position.top+parseInt(in_chart_h)-parseInt(outerWidth1/2),},
800, // 移动的时间为0.8s
function () {
$('.point').hide(); // 利用回调函数再隐藏
}
);
// 得到原先购物车中的数量
var old_count = $count.html();
console.log(old_count);
$count.html(parseInt(old_count)+1);
});
});
</script>
</head>
<body>
<div class="chart">购物车<em>0</em></div>
<input type="button" name="" value="加入购物车" class="add">
<div class="point"></div>
</body>
</html>显示效果如下所示：
4、 获取浏览器可视区宽度高度、获取页面文档的宽度高度、获取页面滚动距离
1、获取浏览器可视区宽度高度
2、获取页面文档的宽度高度
3、获取页面滚动距离
scrolltop效果演示：
scrolleft显示效果：
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悬浮菜单</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// 获得可视区域的宽度
var window_width = $(window).width();
// 获得可视区域的高度
var window_height = $(window).height();
console.log('可视区域的宽度：'+window_width)
console.log('可视区域的高度：'+window_height)
// 获取文档的宽度
var document_width = $(document).width();
var document_height = $(document).height();
console.log('浏览器文档的宽度：',document_width)
console.log('浏览器文档的高度：',document_height)
})
</script>
</head>
<body>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>显示效果：
6、页面滚动事件
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悬浮菜单</title>
<style type="text/css">
body{
margin: 0;
}
.banner{
width: 960px;
height:200px;
background-color: cyan;
margin: 0 auto;
}
.menu{
width: 960px;
height: 50px;
background-color: gold;
margin: 0 auto;
text-align: center;
opacity: 0.3;
}
.back{
width: 960px;
height: 50px;
margin: 0 auto;
text-align: center;
}
p{
text-align: center;
color: green;
}
.totop{
width: 40px;
height: 40px;
background-color: black;
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 10px;
text-align: center;
line-height: 45px;
font-size: 25px;
cursor: pointer; /*放置上去变成手*/
display: none;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
var $back = $('.back');
var $totop = $('.totop');
console.log(scrollTop)
// 将数据使用标签页显示
document.title=scrollTop;
if (scrollTop>200){
$('.menu').css({'position':'fixed',
'top':'0',
'left':'50%',
'margin-left':'-480px'
})
$back.show()
}else {
$('.menu').css({'position':'static',
'margin':'0 auto'
})
$back.hide()
$totop.hide()
}
if (scrollTop>400){
$totop.fadeIn();
}else {
$totop.fadeOut()
}
});
// 点击后返回页面顶部
var $totop = $('.totop');
$totop.stop().click(function () {
$('html,body').animate({'scrollTop':'0'})
})
});
</script>
</head>
<body>
<div class="banner"></div>
<div class="menu">菜单</div>
<!-- 防止出现跳变的情况-->
<div class="back"></div>
<!-- 返回顶部的按钮-->
<div class="totop">↑</div>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文档内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>显示效果如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
