私の小さな壊れた車
ホームページ > 記事 > ウェブフロントエンド > js_javascriptスキルで実装した切り替えパネルのサンプルコード
js_javascriptスキルで実装した切り替えパネルのサンプルコード
- WBOYオリジナル
- 2016-05-16 17:32:021039ブラウズ
最近、Miaowei Classroom の js ビデオを見て少し知識を学びました。コードは少し肥大化しているので、専門家に見てもらってください。アドバイスをいただけますか。笑、またありがとうございます。
効果はおそらく次のとおりです。
別の質問にマウスを置くと、別の写真と説明が表示されます。
コードを共有:
コードをコピー コードは次のとおりです:
;
"text/javascript">
window.onload= function(){
var obj=document.getElementById('menu').getElementsByTagName('li');/*コンテナ内のすべての li 要素を取得しますid menu*/
var con=document.getElementById ('content').getElementsByTagName('img')[0];/*content に表示される最初の img オブジェクトを取得します*/
var href=document. getElementById('content').getElementsByTagName('a' )[0];
var hrefLink=new Array('http://www.baidu.com','http://weibo.com/2622932383/profile) ?topnav=1&wvr=5','http://www.taabao.com','http://google.com.hk')/*接続されているすべての配列を保存*/
var word=new Array('私の小さな壊れた車'、'雑草が生い茂る、それは希望です'、'小さな友達が見ています'、'鉄のロープは遠くへ続いています');/*各画像のコメントは配列に保存されます*/
var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*コメントを格納する p 要素を取得します*/
var i=0>for(i=0; ;i
obj[i].index=i;
obj[i].onmouseover=function(){
con.src='画像/写真' (this.index 1) '.jpg';
pContent.innerHTML=words[this.index]
hreff.href=hrefLink[this.index];
}
}
}
;
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。