本文實(shí)例講述了JQuery獲取元素尺寸、位置及頁面滾動(dòng)事件應(yīng)用。分享給大家供大家參考，具體如下：
獲取元素尺寸
<!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'); //盒子內(nèi)容的尺寸 console.log($div.width()); console.log($div.height()); //盒子內(nèi)容加上padding的尺寸 console.log($div.innerWidth()); console.log($div.innerHeight()); //盒子的真實(shí)尺寸，內(nèi)容尺寸加上padding加上brder console.log($div.outerWidth()); console.log($div.outerHeight()); //盒子的真實(shí)尺寸加上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>獲取元素絕對(duì)位置
<!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'); //獲取元素絕對(duì)位置 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ù)
加入購物車動(dòng)畫
設(shè)置一個(gè)按鈕，一個(gè)購物車框，一個(gè)小方框（隱藏）。點(diǎn)擊按鈕之后，小方框的位置從按鈕以animate動(dòng)畫的形式放到購物車框，購物車的數(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();/*移動(dòng)到購物車按鈕上，然后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);/*轉(zhuǎn)換成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;/*固定定位，就是相對(duì)于頁面位置的定位*/ left: 0; top: 0; display: none;/*把小紅點(diǎn)藏起來*/ z-index: 999;/*這樣設(shè)置小紅點(diǎn)就能蓋住其他元素*/ } </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代碼運(yùn)行工具 http://tools.VeVB.COm/code/HtmlJsRun 測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
