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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
Three.js实现3D机房效果
Dec 30 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实现短信发送代码
2015/07/05 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Python求解平方根的方法
2015/03/11 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
详解Python中的正则表达式
2018/07/08 Python
Django实现学生管理系统
2019/02/26 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
交通志愿者活动总结
2014/06/27 职场文书
安全演讲稿开场白
2014/08/25 职场文书
房产授权委托书范本
2014/09/22 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2015年党小组工作总结
2015/05/26 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Python中的变量与常量
2021/11/11 Python