jQuery插件實現控制網頁元素動態居中顯示

 這篇文章主要介紹了jQuery插件實現控制網頁元素動態居中顯示,實例分析了jQuery插件的實現與元素動態顯示的技巧,需要的朋友可以參考下

   

本文實例講述了jQuery插件實現控制網頁元素動態居中顯示的方法。分享給大家供大家參考。具體實現方法如下：

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 (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程序設計有所幫助。