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

2019-11-19 11:34:58

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/code/HtmlJsRun 测试上述代码运行效果。

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

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

上一篇：详解如何探测小程序返回到webview页面

下一篇：javascript实现遮罩层动态效果实例