jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示

更新時(shí)間：2015年03月24日 10:03:09 作者：feiwen

這篇文章主要介紹了jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示,實(shí)例分析了jQuery插件的實(shí)現(xiàn)與元素動(dòng)態(tài)顯示的技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

(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);

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)刪除一個(gè)元素后面的所有元素功能
這篇文章主要介紹了jquery實(shí)現(xiàn)刪除一個(gè)元素后面的所有元素功能，操作簡(jiǎn)單方便，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery Easyui datagrid/treegrid 清空數(shù)據(jù)
這篇文章主要介紹了jQuery Easyui datagrid/treegrid 清空數(shù)據(jù)的相關(guān)資料
2016-07-07
JQuery 文本框使用小結(jié)
JQuery 文本框使用小結(jié)，主要是事件的綁定，結(jié)合下js的用法。
2010-05-05
40款非常棒的jQuery 插件和制作教程（系列二）
jQuery 在現(xiàn)在的 Web 開發(fā)項(xiàng)目中扮演著重要角色，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗(yàn)，讓訪問者對(duì)網(wǎng)站留下非常好的印象
2011-11-11
jquery中獲得$.ajax()事件返回的值并添加事件的方法
如果想獲得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想獲得xx的值，要在script中，使用全局變量。利用全局變量引出xx的值。
2010-04-04
這些年、我收集的JQuery代碼小結(jié)
排版也是個(gè)體力活.資源整理自網(wǎng)絡(luò)，送給那些沒有送藏的童鞋，如果你已經(jīng)收藏過了，請(qǐng)不要扔磚頭
2012-08-08
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字后變成文本框且可修改
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字變?yōu)槲谋究蛐Ч蓪?duì)文本框文字進(jìn)行修改，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-09-09
jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼，有需要的朋友可以參考一下
2013-08-08
jquery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象導(dǎo)致了內(nèi)存溢出
在園子里面看到kuibono的文章說JQuery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象，并且在每次Ajax請(qǐng)求之后都會(huì)創(chuàng)建一個(gè)新的xmlHttpRequest對(duì)象，感到驚訝，索性寫了一個(gè)程序驗(yàn)正了一下，果然如kuibono所言
2012-06-06
在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下
2014-12-12