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

最新推荐文章于 2021-08-17 17:42:12 发布

原创最新推荐文章于 2021-08-17 17:42:12 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #WordPress #Opera #CSS #浏览器 #ViewUI

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个用于使元素随滚动条滚动而始终居中的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)，以免被其它的层所遮盖。