[アート] DOMは、フォトギャラリーの改良版をプログラミング

<！DOCTYPE用HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< HTML のxmlns = "のhttp：/ /www.w3.org/1999/xhtml」> 
< 頭> 
< メタHTTP-当量= "Content-Typeの" コンテンツ= "text / htmlの;のcharset = 2312"  /> 
< タイトル>查看图片</ タイトル> 
< スタイルタイプ=「テキスト/ cssの」> 
UL、李{ リストスタイル：なし。24px ; フロート：左; パディング：1EM 。} 
IMG { 表示：ブロック。明確な：両方。} 
</ スタイル> 
</ ヘッド> 

< ボディ> 
< H1 >スナップショット</ H1 > 
< UL ID = 'イメージギャラリー' > 
    < 李> < HREF = "画像/ 1.JPG"   タイトル= "pic01111" >最初の画像</ A > </ 李> 
    < 李> < A HREF = "画像/ 2.JPG"   タイトル= "pic02222" >第二の画像</ A > </ 李> 
    < 李> < A HREF = "画像/ 3.JPG" タイトル= "pic03333" >第三の画像</ A > </ 李> 
    < 李> < A HREF = "画像/ 4.JPG" タイトル= "pic04444" >第四の画像</ A > </ 李>
</ UL > 
< IMG のid = 'プレースホルダ' ALT = '私のイメージギャラリー' SRC = "画像/ placeholder.gif" /> 
< p個の   ID = "説明" >画像を選択してください。</ P > 
< スクリプト> 
window.onload = prepareGallery。
機能prepareGallery（）{
     場合（！のdocument.getElementById）が返す 偽。
    もし（！document.getElementsByTagName）が返す 偽。
    もし（！のdocument.getElementById（' イメージギャラリー' ））を返す 偽。
    VaRのギャラリー= のdocument.getElementById（' イメージギャラリー' ）;
    VaRのリンク= gallery.getElementsByTagName（' A ' ）;
    用（VAR I = 0 ; iが< links.lengthを、私は++ ）{ 
        リンク[I] .onclick = 関数（）{
             showpic（本） ！返すShowPic（この） ;  ShowPic（この）はfalseを返します。？trueに、
            戻る 、偽;
        }
　　　　 リンク[I] = .onkeypressリンク[i]の.onclickを;  //質問：Firefoxの下でテストする際にもこのコードをすることができます書きませんタブを切り替えた後、第1のコードイメージハンドオーバ成功を書き込むために移動しない、第二の画像に切り替えることができない
    }
}

関数をShowPic（whichpic）{
    IF（！のdocument.getElementById（「プレースホルダ」））リターン falseに、
    VARプレースホルダ=のdocument.getElementById（'プレースホルダ'）;
！IF（placeholder.nodeName = ' IMG「）はfalseを返します ; // ******* nodeNameのプロパティも、常に小文字でHTMLドキュメント内の要素ならば、値大文字を返します。
    placeholder.setAttribute（' SRC ' 、whichpic.getAttribute（' のhref ' ））; // または=ソースplaceholder.src（VARソース= whichpic.href）;
     IF （のdocument.getElementById（' 記述' ））{
         VARのテキスト= whichpic.getAttribute（' タイトル' ）whichpic.getAttribute（ 'タイトル'）：？ '' ; //三項演算子の
         VaRの説明= ドキュメント。説明" ）; 
IF（description.firstChild.nodeTypeの== 3）{ 
          description.firstChild.nodeValue = テキスト。
        } 
    } 
trueを返します。
} 

</ スクリプト> 
</ ボディ> 
</ HTML >

レッドjavascriptのコードセクションが考えることである、下位互換性はむしろ書きます！仮定しても過言ではないでください！

return !showpic(this);

　分析：このコードは、プレースホルダ内showpic関数が存在しない場合に解決するために、主である（コードがクリックできない偽のリンクを返すデフォルトにつながります）

交換が成功した場合showpic（）はtrueを返し、絵にする必要があります。失敗した場合は、falseを返します。

そう！リンクを右クリックし利用できない場合showpic（）はデフォルトではfalseです　

links[i].onkeypress=links[i].onclick;

パース：OnKeyPressイベントハンドラが間違って行くことは非常に簡単です。ボタンを押すたびに、ユーザーがそれをトリガーします。一部のブラウザでは、とさえTabキーを含めました！これは、OnKeyPressイベントハンドラに結合がfalseを返した場合、ユーザーが唯一のものは、現在のリンクを残すことができることはありませんアクセスするために、キーボードを使用できることを意味します。

プラス限り、ハンドオーバ成功後の画像は、showpic関数はfalseを返すよう---問題があります。

幸いなことに、私たちは思ったよりのonclickイベントハンドラ賢く。その名は「onclickの」のみに関連したマウスクリックで印象を与えるが、それは真実ではないですが：ほぼすべてのブラウザで、リンクに移動し、Enterキーアクションを押して、Tabキーを使用しますonclikイベントをトリガします。

ベストOnKeyPressイベントハンドラを使用しません。onclickイベントハンドラは、彼らのニーズを満たすことができました。それは「onclickの」と呼ばれるが、キーボードアクセスのサポートは非常に完璧されているが。

ます。https：//www.cnblogs.com/positive/p/3662533.htmlで再現

[アート] DOMは、フォトギャラリーの改良版をプログラミング

おすすめ