原文:
http://blog.sina.com.cn/s/blog_8034a5a40101bejr.html最近在做前臺效果的時候用到了JQuery提供的resize()事件。resize
這個事件是監聽瀏覽器窗口的放大與縮小,也就是說瀏覽器窗口大小的變化。
我在W3CSCHOOL上面查閱的時候,提供了一個例子。W3C源碼
- <</SPAN>html>
- <</SPAN>head>
- <</SPAN>script type="text/javascript" src="/jquery/jquery.js"></</SPAN>script>
- <</SPAN>script type="text/javascript">
- x=0;
- $(document).ready(function(){
- $(window).resize(function() {
- $("span").text(x+=1);
- });
- $("button").click(function(){
- $(window).resize();
- });
- });
- </</SPAN>script>
- </</SPAN>head>
- <</SPAN>body>
- <</SPAN>p>窗口的大小被調整了 <</SPAN>span>0</</SPAN>span> 次。</</SPAN>p>
- <</SPAN>p>請試著調整瀏覽器窗口的大小。</</SPAN>p>
- <</SPAN>button>觸發窗口的 resize 事件</</SPAN>button>
- </</SPAN>body>
- </</SPAN>html>
結果我在IE環境下放大窗口 resize 事件執行了兩次。后來我在谷歌和百度上面查詢了下, 都存在IE環境下執行兩次的相關信息。最后發現一個很不錯的解決方案。 國外有個哥子寫了個插件專門針對Jquery.resize()事件增強了。 地址在這里:http://benalman.com/projects/jquery-resize-plugin/ 在添加jquery.js之后在添加 "jquery.ba-resize.js" 就可以了。
- <</SPAN>html>
- <</SPAN>title>JQuery - resize()</</SPAN>title>
- <</SPAN>head>
- <</SPAN>script type="text/javascript" src="js/jquery.js"></</SPAN>script>
- <</SPAN>script type="text/javascript" src="js/jquery.ba-resize.js"></</SPAN>script>
- <</SPAN>script type="text/javascript">
- x=0;
- $(document).ready(function(){
- $(window).resize(function() {
-
$("span").text(x+=1);
- });
-
- });
- </</SPAN>script>
- </</SPAN>head>
- <</SPAN>body>
- <</SPAN>p>窗口大小被調整過 <</SPAN>span>0</</SPAN>span> 次。</</SPAN>p>
- <</SPAN>p>請試著重新調整瀏覽器窗口的大小。</</SPAN>p>
- </</SPAN>body>
- </</SPAN>html>