jquerydiv居中技巧应用介绍
应用 技巧 介绍 居中 jquerydiv
2023-06-13 09:14:41 时间
veryshortversion:
[html]
复制代码代码如下:
[html]
$("#myDiv").css({top:"50%",left:"50%",margin:"-"+($("#myDiv").height()/2)+"px00-"+($("#myDiv").width()/2)+"px"});
$("#myDiv").css({top:"50%",left:"50%",margin:"-"+($("#myDiv").height()/2)+"px00-"+($("#myDiv").width()/2)+"px"});
shortversion:
[html]
(function($){
$.fn.extend({
center:function(){
returnthis.each(function(){
vartop=($(window).height()-$(this).outerHeight())/2;
varleft=($(window).width()-$(this).outerWidth())/2;
$(this).css({position:"absolute",margin:0,top:(top>0?top:0)+"px",left:(left>0?left:0)+"px"});
});
}
});
})(jQuery);
(function($){
$.fn.extend({
center:function(){
returnthis.each(function(){
vartop=($(window).height()-$(this).outerHeight())/2;
varleft=($(window).width()-$(this).outerWidth())/2;
$(this).css({position:"absolute",margin:0,top:(top>0?top:0)+"px",left:(left>0?left:0)+"px"});
});
}
});
})(jQuery);
Activatedbythiscode:
$("#mainDiv").center();
[javascript]
(function($){
$.fn.extend({
center:function(options){
varoptions=$.extend({//Defaultvalues
inside:window,//element,centerintowindow
transition:0,//millisecond,transitiontime
minX:0,//pixel,minimumleftelementvalue
minY:0,//pixel,minimumtopelementvalue
withScrolling:true,//booleen,takecareofthescrollbar(scrollTop)
vertical:true,//booleen,centervertical
horizontal:true//booleen,centerhorizontal
},options);
returnthis.each(function(){
varprops={position:"absolute"};
if(options.vertical){
vartop=($(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"});
}
if(options.horizontal){
varleft=($(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);
return$(this);
});
}
});
})(jQuery);
[code]
(function($){
$.fn.extend({
center:function(options){
varoptions=$.extend({//Defaultvalues
inside:window,//element,centerintowindow
transition:0,//millisecond,transitiontime
minX:0,//pixel,minimumleftelementvalue
minY:0,//pixel,minimumtopelementvalue
withScrolling:true,//booleen,takecareofthescrollbar(scrollTop)
vertical:true,//booleen,centervertical
horizontal:true//booleen,centerhorizontal
},options);
returnthis.each(function(){
varprops={position:"absolute"};
if(options.vertical){
vartop=($(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"});
}
if(options.horizontal){
varleft=($(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);
return$(this);
});
}
});
})(jQuery);
PLUGINVERSION
[javascript]
(function($){
$.fn.extend({
center:function(options){
varoptions=$.extend({//Defaultvalues
inside:window,//element,centerintowindow
transition:0,//millisecond,transitiontime
minX:0,//pixel,minimumleftelementvalue
minY:0,//pixel,minimumtopelementvalue
withScrolling:true,//booleen,takecareofthescrollbar(scrollTop)
vertical:true,//booleen,centervertical
horizontal:true//booleen,centerhorizontal
},options);
returnthis.each(function(){
varprops={position:"absolute"};
if(options.vertical){
vartop=($(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"});
}
if(options.horizontal){
varleft=($(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);
return$(this);
});
}
});
})(jQuery);
(function($){
$.fn.extend({
center:function(options){
varoptions=$.extend({//Defaultvalues
inside:window,//element,centerintowindow
transition:0,//millisecond,transitiontime
minX:0,//pixel,minimumleftelementvalue
minY:0,//pixel,minimumtopelementvalue
withScrolling:true,//booleen,takecareofthescrollbar(scrollTop)
vertical:true,//booleen,centervertical
horizontal:true//booleen,centerhorizontal
},options);
returnthis.each(function(){
varprops={position:"absolute"};
if(options.vertical){
vartop=($(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"});
}
if(options.horizontal){
varleft=($(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);
return$(this);
});
}
});
})(jQuery);
Activatedbythiscode:
$(document).ready(function(){
$("#mainDiv").center();
$(window).bind("resize",function(){
$("#mainDiv").center({transition:300});
});
);
观此人JS代码，让人叹为观止。
简洁明了。却又举一反三。
相关文章
- ps cs5蒙版教程-Photoshop_CS5初学者必读(10)——蒙版应用技巧
- 如何使用nginx作为docker容器中ASP.NET应用的反向代理
- 清理Redis应用Java技术实现过期清理（redisjava过期）
- Windows 10 可能会在明年支持运行 Android 应用
- 三星S8放大招？人工智能助手Bixby或支持第三方应用
- MySQL查询表的技巧与应用（mysql数据库表的查询）
- 探究MySQL正数的妙用与应用技巧（mysql正数）
- PHP Redis模块：加速Web应用性能（PHPredis模块）
- cdev 在 Linux 中的应用（cdevlinux）
- SQL Server自我连接技巧及其应用（sqlserver自连接）
- Oracle索引扫描技巧：提升查询效率应用与实践（oracle索引扫描）
- Oracle数据库中的指定顺序应用技巧详解（oracle指定顺序）
- 深入探究Oracle国家字符集的重要性和应用技巧（oracle国家字符集）
- Mysql中数据库的内连接与外连接应用（mysql内连接和外连接）
- Oracle全文函数介绍及应用技巧（oracle 全文函数）
- MySQL在个人电脑上的应用及使用技巧（mysql个人电脑使用）
- 利用map函数开发oracle应用的实践（map函数oracle）
- MySQL 排除自身数据库应用技巧（mysql 不包括本身）
- Oracle中截取字段的应用技巧（oracle中截取字段%）
- Oracle中实例灵活应用的技巧（oracle 下的实例）
- ajaxrequest.jsajaxrequest0.7最新版使用AJAXRequest进行AJAX应用程序开发入门小技巧
- androidimageview图片居中技巧应用