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)站，
分享一下我的代碼：
<!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>
效果大概是在這樣的：
鼠標(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>
相關(guān)文章
javascript 回到頂部效果的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)javascript 回到頂部效果的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
javascript 數(shù)組去重復(fù)(在線去重工具)
很多情況下我們需要去掉重復(fù)的內(nèi)容，一般我們都是將很多內(nèi)容放到一個(gè)數(shù)組里面，然后再去重復(fù)，這里簡單為大家整理一下2016-12-12
這篇文章主要介紹了JavaScript自定義函數(shù)的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07 
兼容FF和IE的動(dòng)態(tài)table示例自寫
Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格的文章有很多，但大多數(shù)都不兼容FF和IE，于是手寫了一個(gè)，經(jīng)測試效果還不錯(cuò)，特此與大家分享，感興趣的朋友不要錯(cuò)過
2013-10-10 
大家都知道js是單線程的，執(zhí)行起來是順序的，在順序的業(yè)務(wù)邏輯中當(dāng)然沒有問題，如果遇到可以并發(fā)執(zhí)行的業(yè)務(wù)邏輯，再排隊(duì)就很低級(jí)了！所以這里我們?cè)賮砗唵蔚恼務(wù)凧S中的異步以及如何異步。
2016-08-08 
JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果
本文通過實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果，本文附有圖片和示例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-11-11 
這篇文章主要介紹了JS控制彈出懸浮窗口(一覽畫面)的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05 
js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件及頁面元素的遍歷技巧,需要的朋友可以參考下
2015-08-08 
詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5
這篇文章主要介紹了詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12