|
|
要移动层（把层移动到某个位置）就必须先将层设置绝对定位 style='position:absolute' .
<span style=display:inline-block;'>将整个div内容设置成一个块,同一行
<div style='width:400px;float:left;display:block;'>将整个div内容设置成一个块，块的大小为400px，左对齐，这样当页面一行显示不了多个块的内容时，那么那行最后一个块会自动折行，看例子就明白了
想要层遮住下拉框就要加上iframe和样式属性z-index(小的在下面)才可以遮住下拉框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><HEAD><title>有关层定位、显示、隐藏的例子，加上iframe和样式属性z-index(小的在下面)可以遮住下拉框</title><META HTTP-EQUIV="Pragma" CONTENT="no-cache"/><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"/><META HTTP-EQUIV="Expires" CONTENT="0"/><META HTTP-EQUIV="Content-Type" content="text/html; charset=gbk"/><style>.divBlock {width:400px;float:left;display:block;}</style><script type="text/javascript">var idOfOnClickElement="";//用于判断按钮的名称(这里是点击的地方)var idOfDivElement="";//当前DIV元素的idvar idOfDivElementBefore="";//上一次点击的DIV元素的的id//信息层的隐藏和显示function divDisable(flag,evt){var divElement=document.getElementById(flag)var elem = evt.srcElement ? evt.srcElement : evt.target;idOfOnClickElement=elem.getAttribute('id');idOfDivElementBefore=idOfDivElement;idOfDivElement=flag;var posDiv=findPos(elem); posDiv.push(elem.offsetHeight); posDiv.push(elem.offsetWidth);divElement.style.top=(posDiv[1]+posDiv[2])+'px';divElement.style.left=posDiv[0]-75+'px';var divLeft = parseInt(divElement.style.left);transactDivPosition(divElement,divLeft);if(divElement.style.display=='block'){divElement.style.display='none';}else{divElement.style.display='block';if(idOfDivElementBefore != idOfDivElement && idOfDivElementBefore!=""){document.getElementById(idOfDivElementBefore).style.display='none';}}getHiddenIframe(divElement);}//用于判断层的位置,function findPos(obj) {var curleft = curtop = 0;if (obj.offsetParent) {curleft = obj.offsetLeftcurtop = obj.offsetTopwhile (obj = obj.offsetParent) {curleft += obj.offsetLeftcurtop += obj.offsetTop}} return [curleft,curtop];}//关闭按钮-隐藏层function closeByDivId(divID){document.getElementById(divID).style.display='none';document.getElementById('hiddenIframe').style.display='none';}//处理层的位置function transactDivPosition(divElement,divLeft){var screenWidth = document.body.scrollWidth;var resuleLeft = screenWidth-divLeft;//alert(("divLeft:"+divLeft));//处理位于最左边的层if(divLeft<9){divElement.style.left=9+'px';}//处理位于最右边的层if(resuleLeft<220){if(window.ActiveXObject){//IEif(screenWidth-divLeft<140){divElement.style.top=parseInt(divElement.style.top)-18+'px';if(resuleLeft>130){divElement.style.left=divLeft-78+'px';}else if(resuleLeft>115){divElement.style.left=divLeft-85+'px';}else if(resuleLeft>110){divElement.style.left=divLeft-95+'px';}else if(resuleLeft>102){divElement.style.left=divLeft-105+'px';}else{divElement.style.left=divLeft-110+'px';}//alert((screenWidth-divLeft));}else{if(screenWidth-divLeft>=160){divElement.style.left=divLeft-10+'px';;}else{divElement.style.left=divLeft-60+'px';;}//alert((screenWidth-divLeft));}}else{//非IEif(screenWidth-divLeft<140){if(resuleLeft<130){divElement.style.top=parseInt(divElement.style.top)-20+'px';}if(resuleLeft>130){divElement.style.left=divLeft-75+'px';}else if(resuleLeft>115){divElement.style.left=divLeft-85+'px';}else if(resuleLeft>110){divElement.style.left=divLeft-95+'px';}else if(resuleLeft>102){divElement.style.left=divLeft-105+'px';}else{divElement.style.left=divLeft-112+'px';}//alert((screenWidth-divLeft));}else{if(screenWidth-divLeft>190){divElement.style.left=divLeft-10+'px';;}else if(resuleLeft>175){divElement.style.left=divLeft-25+'px';}else if(resuleLeft>160){divElement.style.left=divLeft-35+'px';}else{divElement.style.left=divLeft-60+'px';;}}}}}function getHiddenIframe(divElement){var hiddenIframe=document.getElementById('hiddenIframe');////这个iframe主要是为了遮住下拉框的//如果样式在css定义像下面这样是不能拿取到值的，所以就要换一种方式取值,如：hiddenIframe.style.height = divElement.offsetHeight;hiddenIframe.style.height= divElement.style.height;hiddenIframe.style.width= divElement.style.width;//拿取css给divElement定义的值,用下面两个//hiddenIframe.style.height = divElement.offsetHeight;//hiddenIframe.style.width= divElement.offsetWidth;hiddenIframe.style.left= divElement.style.left;hiddenIframe.style.top= divElement.style.top;if(divElement.style.display=='block'){hiddenIframe.style.display='block';}else{hiddenIframe.style.display='none';}}//自定义的点击事件var fnBlurDIV=function(evt){ evt = evt ? evt : (window.event ? window.event : null);var elem = evt.srcElement ? evt.srcElement : evt.target;if(!(!document.getElementById(idOfOnClickElement))){if(elem != document.getElementById(idOfOnClickElement) && elem != document.getElementById(idOfDivElement)){if(document.getElementById(idOfDivElement).style.display != 'none'){ document.getElementById(idOfDivElement).style.display = 'none';document.getElementById('hiddenIframe').style.display='none';}}} }//给任何元素添加点击事件function initPatternClickEvent(){if (window.addEventListener) {//非IE,// 添加监听document.addEventListener('click',fnBlurDIV,false);} else if (window.attachEvent){//IEdocument.attachEvent('onclick', fnBlurDIV);}}</script></HEAD><body leftmargin="2px;" class="body"> <formname="thisForm"method="post"> <table border="1" cellpadding="3" cellspacing="1" width="100%" ><tr bgColor="#ffffff"><td><div class="divBlock" name="orderById20030526$1" id="orderById20030526$1" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>涂平测试,,<a id="aId1" onclick='divDisable("divID1",event)' style='cursor:pointer'>更多信息</a></div><div class="divBlock" name="orderById20030526$2" id="orderById20030526$2" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>喜得龙（中国）有限公司-重庆分,2008-09-16 10:26:35.43,<a id="aId2" onclick='divDisable("divID2",event)' style='cursor:pointer'>更多信息</a></div><div class="divBlock" name="orderById20030526$3" id="orderById20030526$3" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>广东好百年装饰设计公司,2008-10-24 17:02:53.23,<a id="aId3" onclick='divDisable("divID3",event)' style='cursor:pointer'>更多信息</a></div><div class="divBlock" name="orderById20030526$4" id="orderById20030526$4" onmouseover='this.style.backgroundColor="#E6E6FA"' onmouseout='this.style.backgroundColor="#FFF"'>佛山市南海安地五金电器厂,2007-04-11 10:02:00.0,<a id="aId4" onclick='divDisable("divID4",event)' style='cursor:pointer'>更多信息</a></div></td></tr><tr><td><select name='test'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select></td></tr></table><div id='divID1' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID1")' onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>11111111111</td></tr></table></div><div id='divID2' index='40000' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID2")' onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>22222222222222</td></tr></table></div><div id='divID3' index='40000' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID3")' onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>3333333333</td></tr></table></div><div id='divID4' index='40000' name='divID' style='z-index:4000;border-style:solid;width:200px;height:250px;position:absolute;background-color:#f1f1fd;display:none;'><table width='100%'><tr><td style='text-align:right;cursor:pointer;'><a onclick='closeByDivId("divID4")' onmouseover='this.style.backgroundColor="#FFDD55"' onmouseout='this.style.backgroundColor="#f1f1fd"'>&nbsp;X&nbsp;</a><td></tr><tr><td>444444444444</td></tr></table></div><iframe id='hiddenIframe' style='position:absolute;display:none;z-index:3000;'></iframe></body></html><script type="text/javascript">initPatternClickEvent();</script> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡