Document directory
- Description
- Code
- Download and view (non-ie gets the best results)
Description
Easy to use:
$('#cbox1').center();
If you don't like to center an element vertically and want it to scroll along with the screen, you can configure it like this (all CSS styles reasonably configured here will be applied ):
$('#cbox2').center({position:'fixed',top:'30%'});
To remove # cobx1 from the parent container (assuming it is static positioning:
$('#cbox1').center({relative:false});
More requirements need to be expanded again.
Code
(Function ($) {$. FN. center = function (settings) {var style = $. extend ({position: 'absolute ', // absolute or fixedtop: '000000', // 50% is the center, and the negative margin is applied. Overflow is ignored. Left: '20140901', zindex: 50%, relative: True // center the entire page with respect to the container that contains it}, settings ||{}); return this. each (function () {var $ this = $ (this); If (style. top = '000000') style. margintop =-$ this. outerheight ()/2; If (style. left = '000000') style. marginleft =-$ this. outerwidth ()/2; If (style. relative &&! $ This. parent (). is ('body') & export this.parent().css ('position') = 'static ') Export this.parent().css ('position', 'relative'); Delete style. relative; // IE6 if (style. position = 'fixed' & $. browser. version = '6. 0') {style. margintop + = $ (window ). scrolltop (); style. position = 'absolute '; $ (window ). scroll (function () {$ this. stop (). animate ({margintop: $ (window ). scrolltop ()-$ this. outerheight ()/2}) ;}}$this.css (style) ;};}) (jquery );
Download and view (non-ie gets the best results)
Http://files.cnblogs.com/ambar/jQuery/center-plugin-jQuery-ambar.htm