最常用的水平居中的方法是: margin:auto;或者margin:0 auto;(上下margin为0,水平居中),但一定注意要设定好width,如果没有设width则默认是100%,这样就不能显示居中效果
获取浏览器的宽高:
if(typeof window.innerHeight != 'undefined'){ alert({ width:window.innerWidth, height:window.innerHeight }); }else{ alert({ width:document.documentElement.clientWidth, height:document.documentElement.clientHeight }); }
获取事件源对象:
function getTarget(evt){ var e = evt || window.event; if(e.srcElement){ //IE }else if(e.relatedTarget){ //w3c } }兼容浏览器的添加事件方法:
//添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){//w3c obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attachEvent('on'+type,fn); } } addEvent(myElement,'click',function(){ alert('click'); }); //移除事件 function removeEvent(obj,type,fn){ if(obj.removeEventListener){//w3c obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//IE obj.detachEvent('on'+type,fn); } } removeEvent(myElement,'click',function(){ alert('click'); }); //获取事件目标对象 function getTarget(evt){ if(evt.target){//w3c return evt.target; }else if(window.event.srcElement){//IE return window.event.srcEvent; } } //阻止事件传播 function preventEvent(evt){ var e = evt || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } //监听ctrl+enter键盘事件 function keyEvent(evt){ var e = evt || window.event; if(e.ctrlKey && e.keyCode == 13){ //执行操作 alert('你按下了ctrl和enter键'); } } //获取选定的文本 function getSelectText(obj){ if(obj.selectionStart){//非IE return obj.value.substring(obj.selectionStart,obj.selectionEnd); }else if(obj.selection){//IE return obj.selection.createRange().text; } } //跨浏览器获取按键编码 function getKeyCode(evt){ var e = evt || window.event; if(typeof e.charCode == 'number'){ return e.charCode; }else{ return e.keyCode; } } var code = getKeyCode(xxx); var key = String.fromCharCode(code);//即可转换为键盘的对应的值,如:编码为:49,转换之后就是1 var fm = document.getElementById('myform'); fm.elements;//myform下面的所以表单元素 fm.elements.length;//myform下面的所以表单元素数量 fm.elements[0];//myform下面的第一个表单元素 //对于下拉框:使用select元素的options获取全部的option元素,使用select元素的selectedIndex获取或者设置当前选中的option元素的索引 //得到option元素之后,通过text获取到中间的文本值,通过value获得value属性值,通过option元素的index属性获取该元素的索引 //对于option元素可以使用selected来判断和设定该option元素是否被选中
var sele = document.getElementById('myselect'); var options = sele.options; $("#myselect").bind('change',function(){ var ele = this.options[this.selectedIndex]; alert(ele.value); alert(ele.text); });
jquery 扩展:
$.fn.test1=function(){
alert('t c h ?');
}
$.fn.extend({
test2 : function(){
alert('t c h 1 ?');
}});
window.scroll事件处理,即窗口滚动事件:
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
var pos = element.css("position"); //当前元素距离页面document顶部的距离
$(window).scroll(function() { //侦听滚动时
var scrolls = $(this).scrollTop();
if($.browser.webkit){
top = 320;
}
if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
if (window.XMLHttpRequest) { //如果不是ie6
element.css({ //设置css
position: "fixed", //固定定位,即不再跟随滚动
top: 0 //距离页面顶部为0
}).addClass("shadow"); //加上阴影样式.shadow
} else { //如果是ie6
element.css({
top: scrolls //与页面顶部距离
});
}
}else {
element.css({ //如果当前元素element未滚动到浏览器上边缘,则使用默认样式
position: pos,
top: top
}).removeClass("shadow");//移除阴影样式.shadow
}
});
};
return $(this).each(function() {
position($(this));
});
};
$.fn.pos = function(_top){
var target = $(this);
var old_pos = target.css('position');
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
if(scrollTop > _top){
target.css({
position: "fixed",
top: 0
});
}else{
target.css({
position:old_pos,
top:top
});
}
});
}
$.fn.test1=function(){
alert('t c h ?');
}
$.fn.extend({
test2 : function(){
alert('t c h 1 ?');
}});
跨浏览器获取元素的style对象:
function getStyle(element,attr){ if(typeof window.getComputedStyle != 'undefined'){ return window.getComputedStyle(element,null)[attr]; }else if(typeof element.currentStyle != 'undefined'){ return element.currentStyle[attr]; } }
另外如果要让多个div块级元素在一行显示,则可以通过float:left或者right来实现,也可以通过position:absulute;top:100px;left:100px(具体值自己设定,注意这种方法要求父元素存在position属性,推荐设定为 position:relative);
注意如果使用了float属性的话,有时候会对父元素的高度和后面的元素的位置产生影响,这时候可以设定父元素的overflow:hidden来消除对父元素的高度的影响,通过在父元素末尾加上clear层来消除对后面的元素的影响:<div style="height:0px;clear:both"></div> 即可;
不管是在整个页面中居中,还是在BOX里居中,不管是text内容还是图片内容,水平居中都是比较简单的,align基本都可以实现.但是垂直居中,就有点小技巧,有一段代码,百试百灵,几乎任何情况下都可以实现居中.
position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;width:200px;height:200px;
其中margin-left和margin-top的值为内容的长和宽的一半(例子假设内容的长宽各为200px). 这句的意思是内容的位置为绝对(position:absolute;) 内容位置坐标在环境的中心点(top:50%; left:50%;) 补偿内容的长宽使内容的中心点位置和环境的中心点位置重合(margin-left:-100px; margin-top:-100px;) 用这段CSS就可以解决无论在多大浏览器分辨率下内容总是垂直居中的问题
1 文字居中
<body>
<div style=" line-height:20px; position:absolute; top:50%; left:50%; text-align:center; margin-top:-10px;">xxxxx</div>
</body>
2 图片居中
<body>
<img src="http://portrait1.sinaimg.cn/1258725992/blog/180 " width="180" height="180" style="position:absolute; top:50%; left:50%; margin-left:-90px; margin-top:-90px;"/>
</body>
当然,这里不讨论说用table可以如何简单实现居中, 在不按w3c标准情况下,即你的页面代码中没有这段声明情况下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你可以打个长宽都100%的表格,并且把内容都居中,也可以实现这样的效果~~ 以上是我个人经验所得,但妈妈说生活是一盒巧克力,虽然我还没有因为这样使用遇其他的问题,也欢迎有遇到BUG的朋友们给我提醒
下面是弹出div层:
弹出层关键:css
background: #CCC;
filter:alpha(opacity=30);//IE中透明度设置
opacity:0.3;//非IE设置透明度
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 998;//设置该div处于其它页面元素的上层,即遮挡的效果
上面设置了背景遮蔽层的样式,这样就可以让页面的元素都不能被点击
方法一:(链接:
http://iask.sina.com.cn/b/15311276.html)
<html> <head> <style> <!-- body{font-family:宋体; font-size:12px; padding:0px; margin:0px;} .showWindow:hover{color:#FF0000} .win_bg{background:#CCC; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:998;} .winTitle{background:#9DACBF; height:20px; line-height:20px} .winTitle .title_left{font-weight:bold; color:#FFF; padding-left:5px; float:left} .winTitle .title_right{float:right} .winTitle .title_right a{color:#000; text-decoration:none} .winTitle .title_right a:hover{text-decoration:underline; color:#FF0000} .winContent{padding:5px;} --> </style> <script language="javascript"> function showWindow(){ if(document.getElementById("divWin")) { $("divWin").style.zIndex=999; $("divWin").style.display=""; } else { var objWin=document.createElement("div"); objWin.id="divWin"; objWin.style.position="absolute"; objWin.style.width="520px"; objWin.style.height="220px"; objWin.style.border="2px solid #AEBBCA"; objWin.style.background="#FFF"; objWin.style.zIndex=999; document.body.appendChild(objWin); } if(document.getElementById("win_bg")) { $("win_bg").style.zIndex=998; $("win_bg").style.display=""; } else { var obj_bg=document.createElement("div"); obj_bg.id="win_bg"; obj_bg.className="win_bg"; document.body.appendChild(obj_bg); } var str=""; str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">弹出式窗口</span><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏 str+='<div class="winContent">这是一个页面内部弹出窗口,使用W3C的createElement()方法和appendChild()方法<br /> 用火狐打开可以拖动窗口(IE拖动可能有问题)</div>'; //窗口内容 $("divWin").innerHTML=str; } function closeWindow(){ $("divWin").style.display="none"; $("win_bg").style.display="none"; } function $(o){ return document.getElementById(o); } function startMove(o,e){ var wb; if(document.all && e.button==1) wb=true; else if(e.button==0) wb=true; if(wb) { var x_pos=parseInt(e.clientX-o.parentNode.offsetLeft);//获取鼠标摁下的时候,鼠标相对于弹出窗口左边缘的距离 var y_pos=parseInt(e.clientY-o.parentNode.offsetTop); //获取鼠标摁下的时候,鼠标相对于弹出窗口上边缘的距离 if(y_pos<=o.offsetHeight) { document.documentElement.οnmοusemοve=function(mEvent) { var eEvent=(document.all)?event:mEvent; //下面两步保证了弹出窗口跟随者鼠标的移动而移动 o.parentNode.style.left=eEvent.clientX-x_pos+"px";//设置鼠标移动的时候,鼠标相对于弹出窗口左边缘的距离 o.parentNode.style.top=eEvent.clientY-y_pos+"px"; //设置鼠标移动的时候,鼠标相对于弹出窗口上边缘的距离 } } } } function stopMove(o,e){ document.documentElement.οnmοusemοve=null; } </script> </head> <body> <a class="showWindow" href="javascript:showWindow()">点击这里</a>打开窗口<br /> </body> </html>
方法二:
//width,height是中间弹出的小div的宽、高,page是该小div页面的地址 function openDivWin(width, height,page){ var msgw,msgh,bordercolor; msgw=width;//提示窗口的宽度 msgh=height;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口的标题颜色 var sWidth,sHeight; sWidth=document.body.offsetWidth; sHeight=screen.height; var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#777"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgObj=document.createElement("div") msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.background="white"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.top = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -height/2+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="25px"; msgObj.style.zIndex = "10001"; var title=document.createElement("h4"); title.setAttribute("id","msgTitle"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="3px"; title.style.background=bordercolor; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity="0.75"; title.style.border="1px solid " + bordercolor; title.style.height="18px"; title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="white"; title.style.cursor="pointer"; title.innerHTML="关闭"; title.οnclick=function(){ document.body.removeChild(bgObj); document.getElementById("msgDiv").removeChild(title); document.body.removeChild(msgObj); } document.body.appendChild(msgObj); document.getElementById("msgDiv").appendChild(title); var txt=document.createElement("div"); txt.style.margin="5px" txt.setAttribute("id","content"); document.getElementById("msgDiv").appendChild(txt); $("#content").load(page); }
然后调用该js:
function modifyPassword(){ openDivWin(500,230,'${pageContext.request.contextPath}/goModifyPassword.action'); }