好资源导航 » 文章资讯 » JQuery获取元素尺寸、位置及页面滚动事件应用示例

JQuery获取元素尺寸、位置及页面滚动事件应用示例

2023-08-23 13:32:09 65

本文实例讲述了JQuery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考，具体如下：

获取元素尺寸





Title


$(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));
})


.box{
width:300px;
height:200px;
padding:20px;
border:10pxsolid#000;
margin:20px;
background-color:gold;
}




dd

获取元素绝对位置





Title


$(function(){
var$div=$('.box');
//获取元素绝对位置
varoPos=$div.offset();
console.log(oPos);
$div.click(function(){
//alert(oPos.left);
document.title=oPos.left+"|"+oPos.top;
})
})


.box{
width:200px;
height:200px;
background-color:#f6b544;
margin:50pxauto0;
}

主要就是offset()函数

加入购物车动画

设置一个按钮，一个购物车框，一个小方框（隐藏）。点击按钮之后，小方框的位置从按钮以animate动画的形式放到购物车框，购物车的数量加一：





Title


$(function(){
var$chart=$('.chart');
var$count=$('.chartem');
var$btn=$('.add');
var$point=$('.points');
var$w01=$btn.outerWidth();
var$h01=$btn.outerHeight();
$btn.click(function(){
varoPos01=$btn.offset();
varoPos02=$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();
variNum=$count.html();/*读em里的信息*/
$count.html(parseInt(iNum)+1);/*转换成int类型然后加一*/
});
})
});


.chart{
width:150px;
height:50px;
border:2pxsolid#000;
text-align:center;
line-height:50px;
float:right;
margin-right:100px;
margin-top:100px;
}
.chartem{
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;/*这样设置小红点就能盖住其他元素*/
}



购物车0

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

JQuery获取元素尺寸、位置及页面滚动事件应用示例

热门推荐

随机推荐