JQuery获取元素尺寸、位置及页面滚动事件应用示例
程序员文章站
2024-01-27 18:25:10
本文实例讲述了jquery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考，具体如下：
获取元素尺寸
&...
本文实例讲述了jquery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考，具体如下：
获取元素尺寸
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $div=$('.box');
//盒子内容的尺寸
console.log($div.width());
console.log($div.height());
//盒子内容加上padding的尺寸
console.log($div.innerwidth());
console.log($div.innerheight());
//盒子的真实尺寸，内容尺寸加上padding加上brder
console.log($div.outerwidth());
console.log($div.outerheight());
//盒子的真实尺寸加上margin
console.log($div.outerwidth(true));
console.log($div.outerheight(true));
})
</script>
<style type="text/css">
.box{
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid #000;
margin: 20px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box">
dd
</div>
</body>
</html>
获取元素绝对位置
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $div=$('.box');
//获取元素绝对位置
var opos=$div.offset();
console.log(opos);
$div.click(function () {
// alert(opos.left);
document.title=opos.left+"|"+opos.top;
})
})
</script>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #f6b544;
margin: 50px auto 0;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
主要就是offset()函数
加入购物车动画
设置一个按钮，一个购物车框，一个小方框（隐藏）。点击按钮之后，小方框的位置从按钮以animate动画的形式放到购物车框，购物车的数量加一：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $chart=$('.chart');
var $count=$('.chart em');
var $btn=$('.add');
var $point=$('.points');
var $w01=$btn.outerwidth();
var $h01=$btn.outerheight();
$btn.click(function () {
var opos01=$btn.offset();
var opos02=$chart.offset();
$point.css({left:opos01.left+parseint($w01/2)-8,top:opos01.top+parseint($w01/2)-8}).show();/*移动到购物车按钮上，然后show*/
$point.animate({left:opos02.left+parseint($w01/2)-8,top:opos02.top+parseint($w01/2)-8},800,function () {
$point.hide();
var inum=$count.html();/*读em里的信息*/
$count.html(parseint(inum)+1);/*转换成int类型然后加一*/
});
})
});
</script>
<style type="text/css">
.chart{
width: 150px;
height: 50px;
border: 2px solid #000;
text-align: center;
line-height: 50px;
float: right;
margin-right:100px ;
margin-top: 100px;
}
.chart em{
font-style: normal;
color: red;
font-weight: bold;
}
.add{
width: 100px;
height: 50px;
border: 0;/*去掉边框*/
background-color: green;
color: #fff;
float: left;
margin-top: 300px;
margin-left: 300px;
}
.points{
width: 16px;
height: 16px;
background-color: red;
position: fixed;/*固定定位，就是相对于页面位置的定位*/
left: 0;
top: 0;
display: none;/*把小红点藏起来*/
z-index: 999;/*这样设置小红点就能盖住其他元素*/
}
</style>
</head>
<body>
<div class="chart">购物车<em>0</em></div>
<input type="button" name="" value="加入购物车" class="add">
<div class="points"></div>
</body>
</html>
感兴趣的朋友可以使用在线html/css/javascript代码运行工具 http://tools.jb51.net/code/htmljsrun 测试上述代码运行效果。
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery常见事件用法与技巧总结》、《jquery常用插件及用法总结》、《jquery操作json数据技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。