js實(shí)現(xiàn)的切換面板實(shí)例代碼

更新時(shí)間：2013年06月17日 15:27:39 作者：

切換面板具備功能：鼠標(biāo)劃過不同的題目會(huì)有不同的圖片和解說，可以連接到不同的網(wǎng)站，實(shí)例代碼如下，感興趣的朋友可以參考下哈

最近小菜鳥看了妙味課堂的js視頻，學(xué)習(xí)了一點(diǎn)知識(shí)，在這里總結(jié)一下，代碼寫的有點(diǎn)臃腫，剛開始學(xué)，不知道咋著優(yōu)化，看到的高手可以指點(diǎn)一下，呵呵，再此謝過，
效果大概是在這樣的：

鼠標(biāo)劃過不同的題目會(huì)有不同的圖片和解說，可以連接到不同的網(wǎng)站，
分享一下我的代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
<style type="text/css"> 
<!-- 
*{ margin:0; padding:0;} 
#container{ height:auto; width:553px; border:1px solid #CCC; position:relative; margin:100px auto;} 
#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;} 
#content p:nth-child(1){ z-index:2;} 
#content p:nth-child(even){ background:#000; opacity:0.5;} 
#menu{ height:160px; width:153px; float:right;} 
#menu ul{ height:100%; width:100%;} 
#menu ul li{ text-align:center;background:#F6F6F6; position:relative;list-style:none; display:block; height:65px; width:153px; border-bottom:1px solid #CCC;} 
#menu ul li:last-child{ height:68px; border:none;} 
#menu ul li a{ text-decoration:none;color:#000; text-align:center; line-height:65px; font-size:16px;} 
#menu ul li a:hover{ color:#F00;} 
span{ z-index:2; 
height:0; 
width: 0; 
border-color: transparent #f6f6f6 transparent transparent; 
border-width:33px; 
border-style: solid; 
} 
.one{ 
position: absolute; 
top: 0; 
left: -66px; 
} 
.two{ 
position: absolute; 
left:-66px; 
top:0; 
} 
.three{ 
position: absolute; 
left: -66px; 
top:0; 
} 
.four{ 
position: absolute; 
border-width:34px; 
left: -68px; 
top:0; 
} 
img{ border:none;} 
--> 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
var obj=document.getElementById('menu').getElementsByTagName('li');/*獲取id為menu的容器中的所有l(wèi)i元素*/ 
var con=document.getElementById('content').getElementsByTagName('img')[0];/*獲取content里面出現(xiàn)的第一個(gè)img對(duì)象*/ 
var hreff=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.taobao.com','http://google.com.hk')/*存所有連接的數(shù)組*/ 
var words=new Array('我的小破車','雜草叢生，是希望','小伙伴在張望','鋼索通向遠(yuǎn)方');/*每張圖片的解說詞存放在數(shù)組里*/ 
var pContent=document.getElementById('content').getElementsByTagName('p')[0];/*獲取存放解說詞的p元素*/ 
var i=0; 
for(i=0;i<obj.length;i++) 
{ 
obj[i].index=i; 
obj[i].onmouseover=function(){ 
con.src='images/photo'+(this.index+1)+'.jpg'; 
pContent.innerHTML=words[this.index]; 
hreff.href=hrefLink[this.index]; 
} 
} 
} 
</script> 
</head> 
<body> 
<div id="container"> 
<div id="content"> 
<p>我的小破車</p> 
<p></p> 
<a ><img src="images/photo1.jpg" width="400" height="266"/></a></div> 
<div id="menu"> 
<ul> 
<li><a href="#">語文詳解</a><span class="one"></span></li> 
<li><a href="#">數(shù)學(xué)詳解</a><span class="two"></span></li> 
<li><a href="#">php進(jìn)階</a><span class="three"></span></li> 
<li><a href="#">c++惡補(bǔ)</a><span class="four"></span></li> 
</ul> 
</div> 
<div style="clear:both;"></div> 
</div> 
</body> 
</html> 