jQuery插件实现控制网页元素动态居中显示


Posted in Javascript onMarch 24, 2015

本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下:

(function($)
{
  $.fn._center = function(self, parent, dimension)
  {
    if(!dimension.vertical && !dimension.horizontal)
      return; //won't do anything anyway
    if(parent)
      parent = self.parent();
    else
      parent = window
    self.css("position", "absolute");
    if(dimension.vertical)
    {
      self.css("top", Math.max(0, (($(parent).height() - $(self).outerHeight()) / 2) +
 $(parent).scrollTop()) + "px");
    }
    if(dimension.horizontal)
    {
      self.css("left", Math.max(0, (($(parent).width() - $(self).outerWidth()) / 2) +
 $(parent).scrollLeft()) + "px");
    }
    return self;
  };
  $.fn.center = function(parent, args)
  {
    if(!args)
    {
      args = {horizontal: true, vertical: true};
    }
    return this.each(function()
    {
      var obj = $(this);
      obj._center(obj, parent, args);
      function callback()
      {
        obj._center(obj, parent, args);
      }
      callback();
      $(window).resize(callback);
    });
  };
})(jQuery);

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
js实现炫酷光感效果
Sep 05 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 #Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 #Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 #Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 #Javascript
JavaScript实现找质数代码分享
Mar 24 #Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 #Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
员工离职通知函
2015/04/25 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis