快捷導(dǎo)航

jQuery監(jiān)聽(tīng)瀏覽器窗口大小的變化實(shí)例

更新時(shí)間：2017年02月07日 09:24:25 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery監(jiān)聽(tīng)瀏覽器窗口大小的變化實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

方法一：在標(biāo)簽上加入 onLoad="" onResize="" 方法寫(xiě)上對(duì)應(yīng)的方法即可

方法二：window.onresize=function(){///.....} 在方法里面寫(xiě)上對(duì)應(yīng)的代碼即可

著兩種方法基本都可以解決問(wèn)題。

<script>
function adjust(obj){
  var div = document.getElementById("pad");
  var txt = document.getElementById("txt");
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  div.style.width = w/3;
  div.style.height = h/3;
  txt.style.width = w/6;
  txt.style.height = h/6;
}
window.onload=function(){
 window.onresize = adjust;
 adjust();
}
</script>
<body style="margin:0px;height:0px;">
<div id="pad" style="background:red;zoom:1;margin:0px;height:0px;">
  <input type="text" id="txt">
</div>
</body>

以上這篇jQuery監(jiān)聽(tīng)瀏覽器窗口大小的變化實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用jQuery的toggle()方法對(duì)HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例)
本文通過(guò)示例給大家介紹了使用jQuery的toggle()方法對(duì)HTML標(biāo)簽進(jìn)行顯示、隱藏操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的原圖對(duì)比窗簾效果,需要的朋友可以參考下
2014-06-06
jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例
這篇文章主要介紹了jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了siblings()函數(shù)獲取同輩元素的操作技巧,需要的朋友可以參考下
2017-01-01
JQuery中兩個(gè)ul標(biāo)簽的li互相移動(dòng)實(shí)現(xiàn)方法
這篇文章主要介紹了JQuery中兩個(gè)ul標(biāo)簽的li互相移動(dòng)實(shí)現(xiàn)方法,可實(shí)現(xiàn)ul標(biāo)簽中l(wèi)i標(biāo)簽內(nèi)容相互替換的技巧,涉及jQuery操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件
這篇文章主要介紹了JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件,涉及jQuery處理鼠標(biāo)事件及動(dòng)畫(huà)效果的方法,需要的朋友可以參考下
2015-06-06
jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂(lè)查詢(xún)功能示例
本文為大家介紹下jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂(lè)查詢(xún)，具體的實(shí)現(xiàn)過(guò)程感興趣的朋友可以了解下哈，希望對(duì)大家有所幫助
2013-06-06
Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作
這篇文章主要介紹了Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作的相關(guān)資料,需要的朋友可以參考下
2015-11-11
JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)，有需要的朋友可以參考一下
2013-09-09
使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
在項(xiàng)目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗(yàn)證圖片的格式與大小，那么如何來(lái)操作呢，今天就給大家分享一個(gè)非常簡(jiǎn)單的jQuery驗(yàn)證上傳圖片的格式與大小的代碼。
2014-12-12
jQuery簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊文本框復(fù)制內(nèi)容到剪貼板上的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊文本框復(fù)制內(nèi)容到剪貼板上的方法,涉及jQuery針對(duì)瀏覽器的判定與剪貼板的讀寫(xiě)操作技巧,需要的朋友可以參考下
2016-08-08