在Firefox、WebKit和Internet Explorer中插入窗口调整大小事件的正确(现代)方法是什么?
你能同时打开/关闭两个滚动条吗?
在Firefox、WebKit和Internet Explorer中插入窗口调整大小事件的正确(现代)方法是什么?
你能同时打开/关闭两个滚动条吗?
当前回答
除了上面提到的窗口调整大小函数之外,还有一点很重要,那就是如果没有对事件进行解压缩,那么调整大小事件就会触发很多次。
Paul Irish有一个很好的函数,它可以大量地撤销调整大小的调用。非常推荐使用。跨浏览器的工作。前几天在IE8中进行了测试,一切正常。
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
请务必查看演示以查看区别。
这里是完整的函数。
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
其他回答
jQuery默认提供了$(window).resize()函数:
<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
$rightPanelData = $( '.rightPanelData' )
$leftPanelData = $( '.leftPanelData' );
//jQuery window resize call/event
$window.resize(function resizeScreen() {
// console.log('window is resizing');
// here I am resizing my div class height
$rightPanelData.css( 'height', $window.height() - 166 );
$leftPanelData.css ( 'height', $window.height() - 236 );
});
</script>
既然你是开放的jQuery,这个插件似乎做的把戏。
下面是使用resize事件的非jquery方法:
window.addEventListener('resize', function(event){
// do stuff here
});
它适用于所有现代浏览器。它不会为你扼杀任何东西。这里有一个实际应用的例子。
希望对jQuery有帮助
首先定义一个函数,如果已有函数,则跳到下一步。
function someFun() {
//use your code
}
浏览器调整大小的方法如下。
$(window).on('resize', function () {
someFun(); //call your function.
});
很抱歉提出了一个旧线程,但如果有人不想使用jQuery,你可以使用这个:
function foo(){....};
window.onresize=foo;