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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式.dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能

  • jQuery动态显示和隐藏datagrid中的某一列的方法

    复制代码 代码如下: $(function(){ $('#tt').datagrid({ title:'报表统计', width:1020, height:400, url:'', fitColumns:true, loadMsg:'正在获取,请稍侯...', singleSelect:true, nowrap:false, columns:[[ {field:'REGION_NAME',title:'分公司',width:30,align:'center'}, {field:'COUNTY_N

  • jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

    一般的,一个jqGrid的基本属性有一下几个常用的. 复制代码 代码如下: $("#id").jqGrid({ url: "", datatype: "local", postData: { strJson: Data }, mtype: "post", height: 45, width: 450, rowNum: rum, //每页的记录数 pgtext: "第{0}页 共{1}页", pgbutton

  • 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

    基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

    打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果 HTML结构: 复制代码 代码如下: <ul class="vote-box-list clearfix" id="appVoteBox"> <li class="vl-item" id="voteItem0" > <div class="vote-item-wrap"> <h4>A:</h4

  • jQuery动态效果显示人物结构关系图的方法

    本文实例讲述了jQuery动态效果显示人物结构关系图的方法.分享给大家供大家参考.具体分析如下: 这是一个人物关系图,可动态展示,效果非常漂亮.点击文字可出现动态关系图的转换效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

  • jQuery动态改变图片显示大小(修改版)的实现思路及代码

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等. 原始代码: 复制代码 代码如下: $(document).ready(function() {     $('.post img').each(function() {     var maxWidth = 100; /

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

    本文实例讲述了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 par

  • jQuery插件jRumble实现网页元素抖动

    jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><

  • jQuery插件StickUp实现网页导航置顶

    实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic

  • jQuery插件实现屏蔽单个元素使用户无法点击

    复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http

  • jquery单击文字或图片内容放大并居中显示

    jquery单击文字或图片内容放大并居中显示

    我们想要实现的效果是: 点击一张小图,会在页面的居中位置显示一张大图. 使用了animate动画函数,有从小图到大图,从小图位置到居中位置的轨迹. 支持IE7及以上浏览器,火狐.谷歌浏览器. 大图得居中位置,我主要使用了如下代码: var width=$('.alert').find('img').width();//大图得宽高 var height=$('.alert').find('img').height(); var lwidth=$(window).width();//屏幕中页面可见区

  • jquery插件hiAlert实现网页对话框美化

    厌烦了IE浏览器的警告窗,伴随着"咚"恐惧的一声,让人感觉好像有一种坏事情即将来临.而如今各浏览器对网页的弹出警告框(alert).确认对话框(confirm).输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格. hiAlert插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,还提供了渐变提示条效果,弹出网页层效果,它目前兼容各主流浏览器. 使用方法 hiAlert提供了五种方法可以使用: 1.hiAlert hiAler

  • 强大的jquery插件jqeuryUI做网页对话框效果！简单

    强大的jquery插件jqeuryUI做网页对话框效果！简单

    我们先来最简单的,网页的登录窗口: 不过开始之前,大家先下载jquery的插件本人习惯用了vs2008来做网页了,先添加一个空白页 这是最简单的的做法...先在body里面插入 <body><div id="div1"><table><tr><td>用户名</td><td><input type="text" style="width:100px" />

  • 完美实现浮动元素横排居中显示

    经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看. 首先看html代码: <div class="webFooter"> <div class="wrap"> <div class="tabs"> <ul&g

  • jQuery 插件 将this下的div轮番显示

    复制代码 代码如下: /* 将this下的div轮番显示 dname指定需要执行此动作的元素,如果没有指定dname,将默认全部子元素; tname指定与dname对应的激活元素; speed显示切换速度; effe显示的效果; */ (function(){ .fn.w_picSwap=function(dname,tname,speed,effe){ speed=speed || 2000; dname=dname || ""; tname=tname || ""

  • 分享jQuery网页元素拖拽插件

    分享jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果. js/jquery.jLdraggable.js: ;(function($){ $.fn.extend({ "jLzindex" : function(){ //用于判断和设置各个对话框的z-index var $dragIndex = $

随机推荐