亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

jQuery獲取元素位置以及高度與寬度 動態調整打

系統 2413 0

jQuery獲取元素位置以及高度與寬度 動態調整打開新窗口效果

來源:http://www.biuuu.com/?p=285

上期在 jQuery模擬新窗口打開 輕松使用javascript創建新窗口 一 文中通過jQuery模擬新窗口打開創建新窗口,了解jQuery打開新窗口機制原理,但通過細心我們發現,定義的窗口CSS樣式是固定的,對于實際應用 來說非常有限,需要擴展該功能增加創建新窗口的實用性,對于大部分應用來說,只需要獲取元素的位置以及高度與寬度,就可以根椐當前元素的位置來調整打開新 窗口的位置,動態調整打開新窗口效果,這對于打開新窗口來說更加實用。jQuery提供了一個獲取位置方法offset()和二個分別獲取高度與寬度方法 height()和width(),結合上期實例,我們增加如下幾行代碼,了解jQuery獲取元素位置以及高度與寬度方法,供參考。

實例代碼(略)

javascript部分

  1. $(document).ready(function(){
  2. $("#oButton").click(function(){
  3. openwin.getWin();
  4. });
  5. });
  6. var openwin = {};
  7. openwin.getWin = function(){
  8. var obj = $("#open");
  9. //是否已經新開窗口
  10. if(obj.html() != '' ){
  11. openWindow = $("#newWindow");//存在窗口
  12. openWindow.slideToggle("slow");//顯示效果
  13. }else{
  14. //模擬彈出窗口樣式
  15. var openWindow = $(openwin.getHtml());//不存在窗口
  16. //定義CSS樣式 模擬關鍵 自定義設置CSS樣式
  17. var obj = $("#oButton");
  18. var offset = obj. offset() ;
  19. var right = offset.left+obj. width() ;
  20. var down = offset.top+obj. height() ;
  21. openWindow.css({
  22. 'font-size':'12px',
  23. 'position':'absolute',
  24. 'margin':'20px',
  25. 'left': right ,
  26. 'top': down ,
  27. 'width':'300px',
  28. 'background-color':'#f0f5FF',
  29. 'border': '1px solid #000',
  30. 'z-index': '50',
  31. 'padding':'10px'});
  32. openWindow.appendTo($("#open"));
  33. }
  34. //綁定單擊事件 確定
  35. openWindow.find("#show").click(function(){
  36. openwin.showWindow();
  37. }).end();
  38. //綁定單擊事件 關閉
  39. openWindow.find("#closed").click(function(){
  40. openwin.closeWindow();
  41. }).end();
  42. }
  43. //獲取窗口頁面元素 模擬窗口
  44. openwin.getHtml = function(){
  45. //自定義頁面元素,樣式,大小等
  46. html? = '<div id="newWindow">';
  47. html += '<p>jQuery彈出窗口</p>';
  48. html += '<p>網站:<input type="text" name="" value="" /></p>';
  49. html += '<p><button id="show">確定</button> <button id="closed">關閉</button></p>';
  50. html += '</div>';
  51. return html;
  52. }
  53. //確認事件
  54. openwin.showWindow = function(){
  55. $("#newWindow").hide();
  56. }
  57. //關閉事件
  58. openwin.closeWindow = function(){
  59. $("#newWindow").hide();
  60. }

代碼詳解
1,獲取對象 (自定義調整打開新窗口參照元素)
var obj = $("#oButton");
實例中我獲取的對象是彈出窗口按鈕,這樣創建的新窗口就會根椐按鈕的位置進行調整,實例中將創建的新窗口顯示的按鈕的右下角。

2,獲取對象元素的位置 (offset()方法)
var offset = obj.offset();
獲取對象元素的位置,分別是元素的top和left,調用方法是:offset.left和offset.top,可知當前對象的左部和頂部位置。

3,獲取對象元素的寬度 (width()方法)
var right = offset.left+obj.width();
實例中是獲取對象的右下角位置,創建新窗口的左部位置。

4,獲取對象元素的高度 (height()方法)
var down = offset.top+obj.height();
實例中是獲取對象的右下角位置,創建新窗口的頂部位置。

5,定義CSS樣式,分別設置左部和頂部。
'left':right,
'top':down,
要注意CSS樣式中margin和padding的值,以及瀏覽器IE與firefox兼容等效果。

結合上面實例,jQuery獲取元素位置以及高度與寬度非常簡單,通過內置方法 offset (), width ()和 height ()實現我們的動態調整打開新窗口功能,對于其它擴展應用來說也一樣,了解jQuery獲取元素位置以及高度與寬度方法,對于創建新元素,調整元素位置與大小,將非常實用。

jQuery獲取元素位置以及高度與寬度 動態調整打開新窗口效果


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 国产做受视频激情播放 | 摸一摸操一操 | 国产一级α片 | 亚洲一区二区视频在线观看 | 久久精品国产99久久6动漫欧 | 日韩欧美伦理 | 天天操夜夜噜 | 国产成人久久精品二区三区 | 99精品视频在线成人精彩视频 | 国产欧美精品一区aⅴ影院 国产欧美精品一区二区 | 日韩一区二区视频在线观看 | 日韩中文在线视频 | 精品国产一区二区三区19 | 欧美成人精品高清在线播放 | 黄色成人毛片 | 国产成人在线观看免费网站 | 欧美精选在线 | 香蕉视频97 | 九九视频精品在线 | 老司机深夜福利网站 | 国产精品成人第一区 | 久久国 | 波多野结衣国产一区二区三区 | 久久久噜噜噜久久老司机 | 久一视频在线观看 | 人人精品久久 | 2020年新四虎免费 | 新四虎影院 | 男女一级免费视频 | 国产成人高清在线观看播放 | 四虎激情 | 久久久夜色精品国产噜噜 | 香蕉视频网站免费观视频 | 久久69精品久久久久久hb | 久青草国产在线视频_久青草免 | 久久久噜噜噜 | 综合网亚洲 | a高清免费毛片久久 | 一级毛片在线观看视频 | 婷婷视频在线 | 爱爱免费播放视频在线观看 |