鼠标划过不同的题目会有不同的图片和解说,可以连接到不同的网站,
分享一下我的代码:
ホームページ > ウェブフロントエンド > jsチュートリアル > js_javascriptスキルで実装した切り替えパネルのサンプルコード

js_javascriptスキルで実装した切り替えパネルのサンプルコード

WBOY
リリース: 2016-05-16 17:32:02
オリジナル
1070 人が閲覧しました

最近、Miaowei Classroom の js ビデオを見て少し知識を学びました。コードは少し肥大化しているので、専門家に見てもらってください。アドバイスをいただけますか。笑、またありがとうございます。
効果はおそらく次のとおりです。
js_javascriptスキルで実装した切り替えパネルのサンプルコード
別の質問にマウスを置くと、別の写真と説明が表示されます。
コードを共有:

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

;



無題ドキュメント
"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];
}
}
}


;

私の小さな壊れた車





ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート