最近小菜鳥看了妙味課堂的js視頻,學習了一點知識,在這裡總結一下,代碼寫的有點臃腫,剛開始學,不知道咋著優化,看到的高手可以指點一下,呵呵,再此謝過, 效果大概是在這樣的: 滑鼠劃過不同的題目會有不同的圖片和解說,可以連接到不同的網站, 分享我的程式碼: 複製程式碼 代碼如下: 無標題文檔 <BR><!-- <BR>*{ margin:0; padding:0;} <BR>#container{ height:auto; width: 553px; border:1px solid #CCC; position:relative; margin:100px auto;} <BR>#content{ height:266px; width:400px; position:relative; background:#F00; float:left; #content p{ color:#FFF; padding:10px; height:30px; width:380px; position:absolute; left:0; bottom:0;} <BR>#content p:nth-child(1){ z- index:2;} <BR>#content p:nth-child(even){ background:#000; opacity:0.5;} <BR>#menu{ height:160px; width:153px; float:right;} <BR>#menu ul{ height:100%; width:100%;} <BR>#menu ul li{ text-align:center;background:#F6F6F6; position:relative;list-style:none; display:block; height :65px; width:153px; border-bottom:1px solid #CCC;} <BR>#menu ul li:last-child{ height:68px; border:none;} <BR>#menu ul li a{ text-decoration :none;color:#000; text-align:center; line-height:65px; font-size:16px;} <BR>#menu ul li a:hover{ color:#F00;} <BR>span{ z -index:2; <BR>height:0; <BR>width: 0; <BR>border-color: transparent #f6f6f6 transparent transparent; <BR>border-width:33px; <BR>border-style: solvid; <BR>} <BR>.one{ <BR>position: absolute; <BR>top: 0; <BR>left: -66px; <BR>} <BR>.two{ <BR>position: absolute; 🎜>left:-66px; <BR>top:0; <BR>} <BR>.three{ <BR>position: absolute; <BR>left: -66px; <BR>top:0 <BR>; <BR>}; <BR>.four{ <BR>position: absolute; <BR>border-width:34px; <BR>left: -68px; <BR>top:0; <BR>} <BR>img{order bone; } <BR>--> <BR> <BR>window.onload=function(){ <BR>var obj=document.getElementById('menu ').getElementsByTagName('li');/*取得id為menu的容器中的所有li元素*/ <BR>var con=document.getElementById('content').getElementsByTagName('img')[0]; /*取得content裡面出現的第一個img物件*/ <BR>var hreff=document.getElementById('content').getElementsByTagName('a')[0]; <BR>var hrefLink=new Array('http ://www.baidu.com','http://weibo.com/2622932383/profile?topnav=1&wvr=5','http://www.taobao.com','http://google.com .hk')/*存所有連接的數組*/ <BR>var words=new Array('我的小破車','雜草叢生,是希望','小伙伴在張望','鋼索通向遠方');/*每張圖片的解說詞存放在數組裡*/ <BR>var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*取得存放解說詞的p元素*/ <BR>var i=0; <BR>for(i=0;i<obj.length;i ) <BR>{ <BR>obj[i].index=i; <BR>obj [i].onmouseover=function(){ <BR>con.src='images/photo' (this.index 1) '.jpg'; <BR>pContent.innerHTML=words[this.index]; <BR> hreff.href=hrefLink[this.index]; <BR>} <BR>} <BR>} <BR> 我的小破車 語文詳解 數學詳解 php進階 c 惡補