转帖：jQuery: 随滚动居间效果

转帖：jQuery: 随滚动居中效果

?

在网上找到了一个实现“随滚动条滚动居中效果”的jQuery插件，感觉很有用，故收藏下来。

原文地址：http://mrwlwan.wordpress.com/2008/12/05/jquery-%E9%9A%8F%E6%BB%9A%E5%8A%A8%E5%B1%85%E4%B8%AD%E6%95%88%E6%9E%9C/

?

?

随滚动居中的效果，平时都会经常使用到，于是写成一个 jQuery 的插件。同时，这是我写的第一个插件。呵呵。纪念一下。

该插件可以令所选择的 Elements 永远浮动在窗口中央，无论是滚动还是窗口的大小发生改变。

(function($){    $.fn.extend({        // 兼容不同的浏览器取得窗口的大小        getWindowSize: function(){            if($.browser.opera){                return {width: window.innerWidth, height: window.innerHeight};            }            return {width: $(window).width(), height: $(window).height()};        },        // 主函数        scrollCenter: function(options){            // 扩展参数            var op = $.extend({                z: 1000000            }, options);            // 追加到 document.body 并设置其样式            var windowSize = this.getWindowSize();            this.appendTo(document.body).css({                'position': 'absolute',                'z-index': op.z,                'top': (windowSize.height - this.height())/2+$(window).scrollTop() + 'px',                'left': (windowSize.width - this.width())/2+$(window).scrollLeft() + 'px'            });            // 保存当前位置参数            var bodyScrollTop =  $(document).scrollTop();            var bodyScrollLeft =  $(document).scrollLeft();            var movedivTop = this.offset().top;            var movedivLeft = this.offset().left;            var thisjQuery = this;            // 滚动事件            $(window).scroll(function(e){                var tmpBodyScrollTop = $(document).scrollTop();                var tmpBodyScrollLeft = $(document).scrollLeft();                movedivTop += tmpBodyScrollTop - bodyScrollTop;                movedivLeft += tmpBodyScrollLeft - bodyScrollLeft;                bodyScrollTop = tmpBodyScrollTop;                bodyScrollLeft = tmpBodyScrollLeft;                // 以动画方式进行移动                thisjQuery.stop().animate({                    'top': movedivTop + 'px',                    'left': movedivLeft + 'px'                });            });            // 窗口大小重设事件            $(window).resize(function(){                var windowSize = thisjQuery.getWindowSize();                movedivTop = (windowSize.height - thisjQuery.height())/2+$(document).scrollTop();                movedivLeft = (windowSize.width - thisjQuery.width())/2+$(document).scrollLeft();                thisjQuery.stop().animate({                    'top': movedivTop + 'px',                    'left': movedivLeft + 'px'                });            });            return this;        }    });})(jQuery);

$(selector).scrollCenter();$(selector).scrollCenter({z:1000000});

参数 z 是设置其 z-index(默认设为1000000)，以免被其它的层所遮盖。

?