您好,登錄后才能下訂單哦!
最近在做前臺效果的時候用到了JQuery提供的resize()事件。resize 這個事件是監聽瀏覽器窗口的放大與縮小,也就是說瀏覽器窗口大小的變化。
我在W3CSCHOOL上面查閱的時候,提供了一個例子。W3C源碼
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- x=0;
- $(document).ready(function(){
- $(window).resize(function() {
- $("span").text(x+=1);
- });
- $("button").click(function(){
- $(window).resize();
- });
- });
- </script>
- </head>
- <body>
- <p>窗口的大小被調整了 <span>0</span> 次。</p>
- <p>請試著調整瀏覽器窗口的大小。</p>
- <button>觸發窗口的 resize 事件</button>
- </body>
- </html>
結果我在IE環境下放大窗口 resize 事件執行了兩次。后來我在谷歌和百度上面查詢了下, 都存在IE環境下執行兩次的相關信息。最后發現一個很不錯的解決方案。 國外有個哥子寫了個插件專門針對Jquery.resize()事件增強了。 地址在這里:http://benalman.com/projects/jquery-resize-plugin/ 在添加jquery.js之后在添加 "jquery.ba-resize.js" 就可以了。
- <html>
- <title>JQuery - resize()</title>
- <head>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.ba-resize.js"></script>
- <script type="text/javascript">
- x=0;
- $(document).ready(function(){
- $(window).resize(function() {
- $("span").text(x+=1);
- });
- });
- </script>
- </head>
- <body>
- <p>窗口大小被調整過 <span>0</span> 次。</p>
- <p>請試著重新調整瀏覽器窗口的大小。</p>
- </body>
- </html>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。