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程序设计有所帮助。
相关推荐
-
jQuery scroll事件实现监控滚动条分页示例
scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了 $(window).scroll(function () { //$(window).scrollTop()这个方法是当前滚动条滚动的距离 //$(window).height()获取当前窗体的高度 //$(docume
-
jQuery响应滚动条事件功能示例
本文实例讲述了jQuery响应滚动条事件功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
-
JavaScript与JQUERY获取元素的宽、高和位置
javascript中 ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height.几乎所有浏览器都支持该方法.jQuery中没有直接的方法,需要用$(ele).offset().top-$(document).scrollTop()计算得到. 注意:right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最
-
jquery 滚动条事件简单实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
JQuery拖拽元素改变大小尺寸实现代码
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容易.以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单.清晰得多了 下面是 JavaScript Code 复制代码 代码如下: <script type="text/javascript"> /* * jQuery.Resize by wuxinxi007 *
-
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
获取页面某一元素的绝对X,Y坐标,可以用offset()方法: 复制代码 代码如下: <span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span styl
-
jquery获取html元素的绝对位置和相对位置的方法
绝对位置坐标: 复制代码 代码如下: $("#elem").offset().top $("#elem").offset().left 相对父元素的位置坐标: 复制代码 代码如下: $("#elem").position().top $("#elem").position().left 另: static(默认):默认定位方式. relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bo
-
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY
-
jquery中获得元素尺寸和坐标的方法整理
一.获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移(位置).(即视口坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 2.position() position() 方法返回匹配元素相对于父元素的位置(偏移).(相对于父元素的文档坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 3.offsetParent() offsetParent() 方法返回最
-
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位