DOM向けJavaScriptアプリケーション解析(5)_DOM

実際、これは JS チュートリアルの範囲に含めるべきではありません。 IE6 以降のブラウザは固定属性をサポートしている必要があります。 IE6のみ対応しておりません。そこで私はIE6を選択しました。ここでチュートリアルを説明します。さらに、この効果は生徒のコンピューティングスキルを鍛えることもできます。将来のエフェクトの多くは、コンピューター能力を必要とします。笑
中央に固定。あるいは、どこに固定されても思考はほぼ同じです。アルゴリズムを明確にしたい場合に限ります。エフェクトを書くのは簡単です。最初にコードを投稿してください

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body,div{padding:0px;margin:0px;} #gd{width:100px;height:100px;background:#F00;color:#FFF;} </style> <title> </title>固定中心 <div id="gd"> </div> 中央のウィンドウのサイズと高さを変更できるようにします。 <div style="height:1200px;"> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して

]

var を実行する必要がありますisIE=!!window .ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
これら 2 つの文はブラウザを決定するために使用されます。 Aajxでの方法です。それも分かりやすいです。ここではこれ以上多くは言いません。興味があれば、オンラインで検索してさまざまなブラウザについて学ぶことができます。

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document. getElementById("gd").offsetWidth)/2 document.documentElement.scrollLeft;
この 2 つの文が重要なポイントです。慎重に言っておきたいのですが、
document.documentElement.clientHeight は現在のブラウザ ウィンドウの高さを取得することです。
document.getElementById("gd").offsetHeight これは、dom 要素の実際の高さを取得するためのものです。
document.documentElement.scrollTop スクロールバーの高さを取得します。

document.documentElement.clientHeight/2 はブラウザ全体の高さの半分から、document.getElementById("gd").offsetHeight/2 を引いた値が dom 要素の高さの半分です。 DOM 要素を中央に配置する必要があるのは、現在のブラウザーの上部からの上部の距離です。しかし、これは単なる行き止まりです。ブラウザのコンテンツは、ブラウザの現在のウィンドウの高さ以下にすることはできないためです。コンテンツが特に多い場合には、スクロール バーが表示されます。幸いなことに、document.documentElement.scrollTop があり、これがスクロール バーの高さです。これを追加することは、リアルタイム DOM 要素を中央に配置する必要がある場合の現在のブラウザーの上部からの距離です。もちろん、次の文のアルゴリズムはこれと同じです。これ以上の詳細は説明しません。これは少し深い印象を与えます。

私が言ったことを理解したかどうかはわかりません。これは写真と文章で説明する必要があります。しかし、私が言ったことは非常に明確であるべきだと思います。まだ少し混乱している場合。紙に描くだけでも理解できます。
距離が明確であれば。最後にもう 1 つだけ行う必要があります。そのとき、スクロールバーがスクロールします。スクロールの高さはリアルタイムで追加されます。次に、即時の t 値と l 値を dom の上部と左の属性に設定します。これにより、ユーザーに誤った印象を与える可能性があります。これはそこで修正されたと思いました。

コードをコピーします

コードは次のとおりです:

if(isIE6){
setInterval (function( ){
t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 document.documentElement.scrollTop;
l = (document.documentElement.clientWidth - document. getElementById(" gd").offsetWidth)/2 document.documentElement.scrollLeft;
document.getElementById("gd").style.position = "absolute"
document.getElementById("gd").style.トップ = t "px";
document.getElementById("gd").style.left = l
},1)

<script> window.onload = function(){ var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; if(isIE6){ setInterval(function(){ t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop; l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft; document.getElementById("gd").style.position = "absolute" document.getElementById("gd").style.top = t + "px"; document.getElementById("gd").style.left = l + "px"; },1) } else{ document.getElementById("gd").style.position = "fixed" document.getElementById("gd").style.top = t + "px"; document.getElementById("gd").style.left = l + "px"; } } </script>
この段落はこの目的のためのものです。 if(isIE6) は isIE6 が true の場合です。つまり、IE6ブラウザの場合です。 setInterval(...,1) は、IE6 ブラウザで 1 マイクロ秒ごとにステートメントを実行するクロックを設定します。つまり、tとlの値は常に更新されます。その後、DOM 要素の上部と左の属性を継続的に支払います。1 マイクロ秒は非常に高速です。ユーザーが 1 マイクロ秒以内にスクロール バーを引くことは不可能です。したがって、ユーザーは何も見ることができません。そこで決まったのかと思いました。もちろん、スクロールイベントwindon.onscrollを設定することもできます。それも大丈夫です。しかし、私はそれが良いとは思いません。興味があれば、調べてみてもいいでしょう（くどいので気にしないでください。私がたくさんのことを教えるよりも、自分で調べたほうが役に立つと思います）。

もちろん、IE6 以外のブラウザも固定属性をサポートしています。これらのステートメントを実行するだけです。
document.getElementById("gd").style.position = "fixed"//固定属性を dom 要素に追加します
document.getElementById("gd").style.top = t "px"; / /初期化中に dom 要素に中心の t 値を設定します。
document.getElementById("gd").style.left = l "px";//初期化中に dom 要素に中央の l 値を設定します

わかりました。この記事はここまでです。ちょうどここが中心です。下固定引き手、左固定引き手などもあります。原則は同じです。上と左の計算が違うだけです。元気であれば、自分で調べてもいいでしょう。 setInterval と setTimeout という 2 つのメソッドもあります。今後のチュートリアルで頻繁に使用されます。