首頁 >web前端 >js教程 >jquery div 居中技巧應用介紹_jquery

jquery div 居中技巧應用介紹_jquery

WBOY
WBOY原創
2016-05-16 17:48:011115瀏覽

很短的版本:
[html]

複製程式碼 程式碼如下:
$('#myDiv').css({top:'50%',left:'50%',margin :'-' ($('#myDiv').height() / 2) 'px 0 0 -' ($('#myDiv').width() / 2) 'px'});


簡短版本:[html]


複製程式碼程式碼如下: 🎜>(function($){ $.fn.extend({ center: function () {
return this.each(function() {
var top = ( $(window) .height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2; 🎜>$(this ).css({position:'absolute', margin:0, top: (top > 0 ? top : 0) 'px', left: (left > 0 ? left : 0) 'px '});
});
}
});
(function($){
$.fn.extend({
center: function () {
return this.each(function () {
var top = ($(window ).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this ).outerWidth()) /
$ (this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0) 'px', left: (left > 0 ? left : 0) 'px'}) ;
});
}
});


透過此程式碼啟動:




複製程式碼

程式碼如下:
$('#mainDiv').center(); [ javascript]

複製程式碼

程式碼如下:
(function($){ (function($){ (function($){ .fn.extend({ center: function (options) {
var options = $.extend({ // 預設值
inside:window, //元素,中心進入視窗
transition: 0, // 毫秒,過渡時間
minX:0, // 像素,最小左側元素值
minY:0, // 像素,最小頂部元素值
withScrolling:true, // booleen,處理捲軸(scrollTop)
vertical:true, // booleen, 垂直居中
horizo​​ntal:true // booleen, 水平居中
}, options);
return this.each( function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside). height() - $(this) .outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop() || 0; options.minY ? top : options.minY);
$.extend (props, {top: top 'px'});
}
if (options.horizo​​ntal) {
var left = ($(options.inside).width() - $( this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options .minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0) $(this).animate(props, options.transition );
else $(this).css(props);
回傳$(這個);
});
}
});
})(jQuery);
[code]
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // 預設值
inside:window, // 元素,居中進入視窗
transition: 0, // 毫秒,過渡時間
minX:0, // 像素,左側最小元素值
minY:0, / / 像素,最小頂部元素值
withScrolling:true, // booleen, 照顧滾動條(scrollTop)
vertical:true, // booleen, 中心垂直
horizo​​ntal:true // booleen , 中心水平
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top 'px'});水平) {
var left = ( $(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside) .scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0 ) $(this).animate(props, options.transition);
else $(this).css(props);
回傳$(這個);
});
}
});
})(jQuery);


外掛程式版本
[javascript]




複製程式碼



複製程式碼
複製程式碼 程式碼如下:

(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // 預設值
inside:window, // 元素,居中進入視窗
transition: 0, // 毫秒,過渡時間
minX:0, // 像素,左側最小元素值
minY:0, // 像素,最小頂部元素值
withScrolling:true, // 布林值,照顧滾動條(scrollTop)
vertical:true, // 布林值,垂直居中
horizo​​ntal:true // 布林值,水平居中
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($ (options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop()
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top 'px'});
var left = ($(options.inside). width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft( ) || 0;
left = (left > optionsLeft( ) || 0;
left = (left > options .minX ? left : options.minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0) $(this).animate (props, options.transition);
else $(this).css(props);
回傳$(這個);
});
}
});
})(jQuery);


複製程式碼程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:



程式碼(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // 預設值
inside:window, //元素,居中到視窗
transition: 0, // 毫秒,過渡時間
minX:0, // 像素,最小左側元素值
minY:0, // 像素,最小頂部元素值
withScrolling:true, / / booleen, 處理滾動條(scrollTop)
vertical:true, // booleen, 垂直居中
horizo​​ntal:true // booleen, 水平居中
}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options );每(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $( this).outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top
}
if (options.horizo​​ntal) {
var left = ($(options.inside) ).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0) $(this) .animate(props, options.transition); else $(this).css(props); 回傳$(這個); }); } }); })(jQuery);

透過此程式碼啟動:




複製程式碼


複製程式碼複製程式碼 $(document).ready(function(){ $('#mainDiv').center(); $(window).bind('resize', function() { $ ('#mainDiv').center({transition:300});}); 觀此人JS程式碼,讓人嘆為觀止。 簡潔明了。卻又舉了一反三。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn