`

转帖: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),以免被其它的层所遮盖。

 

分享到:
评论

相关推荐

    [转帖]jQuery实现省市联动

    标题中的“jQuery实现省市联动”是指在Web应用中,通过jQuery库来实现在选择省份时,下拉框(或其它选择组件)中的城市选项能够自动更新,以展示与所选省份对应的城市列表。这种功能常见于地址输入或者注册表单中,...

    转帖:液晶显示器原理与维修手册

    - **意义**: 响应时间越短,动态图像显示效果越好。 **8. 可视角度** - **定义**: 用户可以在不明显降低图像质量的情况下观看显示器的角度范围。 - **意义**: 视角越大,用户在不同位置观看时图像质量保持良好。 ...

    转帖:Android应用的自动升级、更新模块的实现docx.docx

    在Android应用开发中,自动升级和更新功能是一个重要的特性,它允许用户无缝地获取应用的最新版本,提高用户体验。本文将详细介绍如何实现这样一个模块。 **一、基础概念** 1. **版本标识**: 在AndroidManifest.xml...

    转帖:我的职场十年,IT人很值得借鉴呀

    根据给定的信息,我们可以从中提炼出以下IT行业的关键知识点及相关经验分享。 ### 一、职业规划与转型 在文中提到作者从2003年开始的职业生涯,在这段时间内经历了多次转型。这表明在IT行业中,持续学习和适应新...

    论坛转帖工具.rar

    标题中的“论坛转帖工具.rar”表明这是一个用于在论坛之间转移帖子的软件工具,通常用于帮助用户方便地将一个论坛的帖子内容复制到另一个论坛,可能是为了分享信息、讨论或保存重要的帖子。这类工具可能包括自动抓取...

    编辑人员转帖去水印工具

    本篇文章将详细探讨“编辑人员转帖去水印工具”,并介绍如何使用名为Teorex Inpaint的1.0.0.2版本的软件来实现这一目标。 首先,我们要理解什么是水印。水印通常是指在图像或视频中添加的半透明标记,它可以是文字...

    UBB论坛转帖圣手.exe

    UBB论坛转帖圣手.exeUBB论坛转帖圣手.exe

    discuz X2转帖工具、采集工具

    X2转帖工具、采集工具”是针对这个平台设计的辅助软件,主要用于帮助论坛管理员或用户批量发布帖子和采集内容,提高论坛内容更新的效率。 一、批量发帖功能 1. 自动化发布:此工具可以自动化地创建和发布帖子,...

    Html2UBBMaxcj_Softii论坛专用转帖工具

    HTML2UBBMaxcj 是一款专为Softii论坛设计的转帖工具,它主要用于将HTML格式的帖子内容转换成UBB代码,以便在论坛中更好地显示和分享。UBB(Universal BBCode)是一种轻量级的标记语言,常用于网络论坛,与HTML类似,...

    atx电源电路图下载

    atx电源电路图下载 AT电源只要能把电源打开就行了,可现在的ATX电源都是电位控制开关而非机械开关,这就需要从电源的那一排查线孔...转帖:http://www.jdwx.info/thread-270610-1-1.html [家电维修论坛](www.jdwx.info)

    转帖工具插件 for PHPwind 7.5 正式版.rar

    "转帖工具插件 for PHPwind 7.5 正式版" 是专门为 PHPwind 7.5 版本设计的一个功能插件,旨在提供便捷的帖子转移功能,帮助管理员或者用户将内容从一个地方轻松移动到另一个地方,而无需直接编辑论坛的原始文件。...

    聊天机器人的小例子

    转帖:本项目是一个聊天机器人的小例子,使用的图灵(www.tuling123.com)提供的聊天api,javaapk之前也发布过一个聊天机器人http://www.javaapk.com/source/1488.html,现在的问答机器人只能分析关键字做一个简单的...

    [转帖]世界编程大赛第一名写的程序

    标题和描述中的“世界编程大赛第一名写的程序”这一知识点,实际上指向了计算机科学与编程竞赛领域的一个重要概念:即在高水平的编程比赛中,优胜者所编写的代码往往蕴含着高级算法、数据结构以及编程技巧。...

    一键转帖功能插件 for 帝国CMS 6.0 GBK utf8 V1.0.rar

    《一键转帖功能插件 for 帝国CMS 6.0 GBK utf8 V1.0》 本文将深入探讨“一键转帖功能插件”在帝国CMS 6.0系统中的应用与实现,该插件适用于GBK及UTF-8编码环境,旨在提升网站内容的分享与传播效率。我们将从安装...

    贴吧转帖工具

    【贴吧转帖工具】是一种专为百度贴吧用户设计的便捷工具,主要用于提高用户在贴吧中的互动效率。通过这款工具,用户可以实现一键转帖和一键8经验签到的功能,极大地简化了传统操作流程,节省了用户的时间,提升了...

    转帖图片提取工具 v1.0.zip

    转帖图片提取工具可以对论坛图片附件信息进行清除,只保留图片代码,操作很简单,推荐有需要转帖图片工具的朋友下载 转帖图片提取工具使用方法: 将IP138上处理过的东西复制到上方的编辑框内,点击只要图片,下面...

    转帖几个网站Banner的FLA源文件

    源文件可能包含各种文本效果,如动态滚动、字体动画等,我们可以从中学习如何使用Flash的文本工具。 7. **导出设置与优化**:FLA文件还展示了如何设置最终的导出选项,包括文件大小优化、播放速度控制和不同平台的...

    【转帖】Extreme Presentation Method

    - **重要性**:不同的受众群体有着不同的需求与兴趣点,了解受众有助于定制化内容,提升演讲效果。 - **实践建议**: - 调研受众背景信息,如年龄、职业、兴趣等。 - 设想受众可能对哪些话题感兴趣。 - 预测受众...

    转帖工具ConvertX fordiscuz7.1/7.2 修改增强版.rar

    1.修改自Convert X转帖工具 2.新增批量替换关键词(原来是单个词语替换,可以利用这个功能删除一些网站的防转帖代码) 3.批量随机新增文字(新增内容可自定义,从而实现伪原创) 4.cookie记录替换和新增关键词(避免每次...

Global site tag (gtag.js) - Google Analytics