DOMスクリプトでの画像切り替え【Firefox対応】_画像特殊効果

学習プロセス中に他の人のコード実装を分析するのは良い習慣です。よく理解できなくても、何度かコードを入力することも感覚を養うのに良いことです。以下は実際の効果です (通常、Firefox でのみテストします)。

上のナビゲーション リンク上でマウスをスライドすると、下のボックス内の写真がスムーズに切り替わり、左右に移動します

HTML 構造は次のとおりです:

コードをコピーします コードは次のとおりです:

Web デザイン

これらは知っておくべきことです。

;

1. 
   


2. ="プレゼンテーション.html" >プレゼンテーション
   
3. 
   動作 >

とても簡単です。以下の JS コードを直接見てみましょう。まず 2 つの補助関数を指定します。
addLoadEvent

Copy code

コードは次のとおりです。 : function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != "function") {

window.onload = func ;

} else {
window.onload();
func();
}
}


名前のとおり、この関数はロードウィンドウの onload イベントを処理するメソッドです。
insertAfter

コードをコピー


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

function insertAfter(newElement, targetElement) { varparent = targetElement.parentNode; if(parent.lastChild == targetElement) { parent.appendChild(newElement); } else {

parent.insertBefore(newElement, targetElement.nextSibling)

}
}


insertBefore がありますが、 DOM API には insertAfter がないため、ここでカスタマイズします。 appendChild 関数と insertBefore 関数を知っていれば、newElement を targetElement の前に挿入するのは簡単です。
次の moveElement 関数は非常にコアです:
moveElement

コードをコピー


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

function moveElement(elementID,final_x,final_y,interval) {if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; var elem = ドキュメント .getElementById(elementID); if(elem.movement) { clearTimeout(elem.movement)

}

if(!elem.style.left) {
elem.style.left = "0px";
if(!elem.style.top) {
elem.style.top = "0px";
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == Final_x && ypos == Final_y) {
return true;
if (xpos var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos dist;
if(xpos > Final_x) {
var dist = Math.ceil((xpos - Final_x)/10);
xpos = xpos - dist;
if(ypos
var) dist = Math.ceil((final_y - ypos)/10);
ypos = ypos dist; -final_y)/ 10);
ypos = ypos - dist;
elem.style.left = xpos "px"; >varrepeat = "moveElement('" elementID "',"final_x ","final_y ","interval")";
elem.movement(repeat, interval); >
final_x、final_y はそれぞれ、要素の移動が終了する左と上の値であるため、移動された要素は位置属性 (「相対」または「位置」) を設定する必要があります。そのため、その左と上の属性はこの関数は難しいことではありません。要素の現在の左と上の値を取得して、final_x、final_y と比較し、各ステップ サイズに従って左と上の値を変更するだけです。は各 if の dist 変数です。毎回、各 dist は移動された要素の最新の左と上に基づいて計算されるため、最初に加速し、次に減速するという移動効果が生じます。パラメーター間隔を setTimeout と組み合わせることで可能になります。
次に、pepareSlideshow 関数で必要な dom 要素を動的に作成します:
prepareSlideshow

コードをコピーします > コードは次のとおりです:

function prepareSlideshow() {
//ブラウザが DOM API を理解できることを確認します
if(!document.getElementsByTagName ) return false;
if(!document.getElementById) return false; slideshow = document.createElement("div");
/*CSS で設定する場合はここで属性を省略できます
slideshow.style.position = "relative";
slideshow.style.overflow = " hidden";
slideshow.style.width = "100px";
slideshow.style.height = "100px";
*/
slideshow.setAttribute("id", "slideshow");
varreview = document.createElement("img");
/*CSS で設定する場合、ここは省略できます
preview.style.position = "absolute";プレビュー.setAttribute("src", "slideshow/topics.gif");
preview.setAttribute("alt", "Web デザインの構成要素");
preview.setAttribute("id", "プレビュー) ");
slideshow.appendChild(preview);
var list = document .getElementById("linklist");
insertAfter(slideshow, list);
// olvar links = list.getElementsByTagName("a");
//
links[0].onmouseover = function() {
moveElement("preview) の各マウスオーバー イベントに moveElement メソッドをアタッチします",-100, 0, 10);
}
links [1].onmouseover = function() {
moveElement("preview",-200, 0, 10);
}
links[2].onmouseover = function() {
moveElement( "preview",-300, 0, 10)
}
}


これにも関係しますいくつかの要素の作成、要素属性の設定、およびその他の基本的な DOM API アプリケーションを実行します。次に、マウス移動イベントに対応する moveElement メソッドを ol[id="linklist"] の要素に追加し、最後に addLoadEvent (prepareSlideshow) を使用します。この機能もHTMLやレンダリングと組み合わせるとわかりやすいです。
コード パッケージのダウンロード
http://www.jb51.net/jiaoben/27501.html