css/js_html/css_WEB-ITnose を通じて div の位置を修正します-htmlチュートリアル-php.cn

css/js_html/css_WEB-ITnose を通じて div の位置を修正します

WBOY

リリース： 2016-06-24 12:27:42

オリジナル

1005 人が閲覧しました

1: まず CSS の使用方法を見てみましょう。CSS で式を記述する必要がありますが、それが点滅します。変数「ignoreMe」と「document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop」を割り当てます (これは IE のバグです)。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> css test </TITLE> 5 <style> 6 #LoadingStatus{ 7 position:fixed !important; 8 position:absolute; 9 top:100px;10 top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );11 margin:0 0 0 -110px;12 width:220px;height:19px;13 left:50%;14 text-align:center;15 border:1px solid red;16 }17 </style>18 </HEAD>19 <BODY>20   <div id="LoadingStatus" style="display:none;"> loading...</div>21     <div style="height:1024px">22         <input type="button" onclick="document.getElementById('LoadingStatus').style.display=''" value='显示loading' />23       </div> 24       <div>25       <input type="button" onclick="document.getElementById('LoadingStatus').style.display=''" value='显示loading' />26     </div>27 </BODY>28 </HTML>

ログイン後にコピー

2: JS で書かれており、実際に CSS に適用できます。これは上記と変わりません。なお、FFでは左上と右上が浮いたままになります。 IE ではすべてが修正されますが、ちらつきます。使用には注意が必要です。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <HTML> 3 <HEAD> 4 <TITLE>JAVASCRIPT</TITLE> 5 <META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="UTF-8"> 6 </HEAD> 7 <style> 8 <!-- 9 .div {10     position: absolute;11     border: 2px solid red;12     background-color: #EFEFEF;13     line-height:90px;14     font-size:12px;15     z-index:1000;16 }17 -->18 </style>19 <BODY>20 <div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>21 <SCRIPT LANGUAGE="JavaScript">22 function sc1(){23 document.getElementById("Javascript.Div1").style.top=24    document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2+"px"25 document.getElementById("Javascript.Div1").style.left=26    document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2+"px";27 }28 </SCRIPT>29 <div id="Javascript.Div2" class="div" style="width: 240px; height:90px;" align="center">左上...</div>30 <SCRIPT LANGUAGE="JavaScript">31 function sc2(){32 document.getElementById("Javascript.Div2").style.top=document.documentElement.scrollTop;33 document.getElementById("Javascript.Div2").style.left=document.documentElement.scrollLeft;34 }35 </SCRIPT>36 <div id="Javascript.Div3" class="div" style="width: 240px; height:90px;" align="center">左下...</div>37 <SCRIPT LANGUAGE="JavaScript">38 function sc3(){39 document.getElementById("Javascript.Div3").style.top=40     document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight+"px";41 document.getElementById("Javascript.Div3").style.left=document.documentElement.scrollLeft;42 }43 </SCRIPT>44 <div id="Javascript.Div4" class="div" style="width: 240px; height:90px;" align="center">右上...</div>45 <SCRIPT LANGUAGE="JavaScript">46 function sc4(){47 document.getElementById("Javascript.Div4").style.top=document.documentElement.scrollTop;48 document.getElementById("Javascript.Div4").style.left=49     document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth+"px";50 }51 </SCRIPT>52 <div id="Javascript.Div5" class="div" style="width: 240px; height:90px;" align="center">右下...</div>53 <SCRIPT LANGUAGE="JavaScript">54 function sc5(){55 56 document.getElementById("Javascript.Div5").style.top=57     document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight+"px";58 document.getElementById("Javascript.Div5").style.left=59     document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth+"px";60 }61 </SCRIPT>62 <SCRIPT LANGUAGE="JavaScript">63 <!--64 function scall(){65 sc1();sc2();sc3();sc4();sc5();66 }67 window.onscroll=scall;68 window.onresize=scall;69 window.onload=scall;70 //-->71 </SCRIPT>72 <div style="position: absolute; top: 0; left: 0; width: 10000px; height: 4000px;"></div>73 </BODY>74 </HTML>

ログイン後にコピー

Three: これはまだ js で書かれていますが、IE ブラウザーのスクロールプロセス中に点滅しません。互換性の効果は非常に優れています。

れーい