JQuery獲取元素尺寸、位置及頁面滾動事件應用示例

更新時間：2019年05月14日 09:25:08 作者：SpecYue

這篇文章主要介紹了JQuery獲取元素尺寸、位置及頁面滾動事件應用,結合實例形式分析了jQuery針對頁面元素動態(tài)操作相關實現(xiàn)技巧,并給出了購物車動畫效果案例進行總結,需要的朋友可以參考下

本文實例講述了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()函數(shù)

加入購物車動畫

設置一個按鈕，一個購物車框，一個小方框（隱藏）。點擊按鈕之后，小方框的位置從按鈕以animate動畫的形式放到購物車框，購物車的數(shù)量加一：

<!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數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery實現(xiàn)form表單基于ajax無刷新提交方法詳解
這篇文章主要介紹了jQuery實現(xiàn)form表單基于ajax無刷新提交方法,結合實例形式分析了jQuery使用$.ajax()方法實現(xiàn)無刷新提交的詳細步驟與實現(xiàn)技巧,并附帶了一個較為完整的實例供大家參考,需要的朋友可以參考下
2015-12-12
JQuery查找DOM節(jié)點的方法
這篇文章主要介紹了JQuery查找DOM節(jié)點的方法,實例分析了jQuery選擇器實現(xiàn)DOM元素結點與屬性結點的查找技巧,需要的朋友可以參考下
2015-06-06
JQuery 在文檔中查找指定name的元素并移除的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query 在文檔中查找指定name的元素并移除的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
Jquery獲取元素的父容器對象示例代碼
本篇文章主要是對Jquery獲取元素的父容器對象的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jquery.validate分組驗證代碼
在很多時候，我們都不是一步就將所有信息填寫完整，然后提交。而是分步進行填寫表單
2011-03-03
jquery實現(xiàn)彈窗(系統(tǒng)提示框)效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)彈窗系統(tǒng)提示框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
jquery 子窗口操作父窗口的代碼
jquery 子窗口操作父窗口的實現(xiàn)代碼。
2009-09-09
jquery實現(xiàn)倒計時功能
這篇文章主要為大家詳細介紹了jquery實現(xiàn)倒計時功能，詳細介紹了setInterval()方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-12-12
jquery form 加載數(shù)據(jù)示例
這篇文章主要介紹了jquery form 加載數(shù)據(jù)的具體實現(xiàn),需要的朋友可以參考下
2014-04-04
在jQuery1.5中使用deferred對象著放大鏡看Promise
在那篇經典的關于jQuery1.5中Deferred使用方法介紹的文章中（譯文見這里），有下面一段描述
2011-03-03