<h1>QQ面板切換效果</h1>
div如下
<div class="bottomDiv">
<div class="btn" style="float: left"></div>
<div>
<div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="選擇在線狀態(tài)">
<div id="loginStateShow" class="login-state-show online">狀態(tài)</div>
<div class="login-state-down">下</div>
<div class="login-state-txt" id="login2qq_state_txt">在線</div>
<ul id="loginStatePanel" class="statePanel login-state" style="display: none">
<li id="online" class="statePanel_li">
<div class="stateSelect_icon online"></div>
<div class="stateSelect_text">我在線上</div>
</li>
<li id="callme" class="statePanel_li">
<div class="stateSelect_icon callme"></div>
<div class="stateSelect_text">Q我吧</div>
</li>
<li id="away" class="statePanel_li">
<div class="stateSelect_icon away"></div>
<div class="stateSelect_text">離開</div>
</li>
<li id="busy" class="statePanel_li">
<div class="stateSelect_icon busy"></div>
<div class="stateSelect_text">忙碌</div>
</li>
<li id="silent" class="statePanel_li">
<div class="stateSelect_icon silent"></div>
<div class="stateSelect_text">請(qǐng)勿打擾</div>
</li>
<li id="hidden" class="statePanel_li">
<div class="stateSelect_icon hidden"></div>
<div class="stateSelect_text">隱身</div>
</li>
</ul>
</div>
</div>
</div>
</div>
觀察這個(gè)div,我們?cè)谶@個(gè)狀態(tài)列表里面給每個(gè)li狀態(tài)都定義了一個(gè)id,當(dāng)我們點(diǎn)下"在線"時(shí),就會(huì)在id為loginStateshow中把他的class變成online,其他狀態(tài)以此類推.我知道你可能還沒有明白,現(xiàn)在我們看看js代碼吧.
首先我們要給loginStateshow綁一個(gè)事件,所以先獲取他的id,
var login State=document.getElementById('loginState')
接下來事這個(gè)ul,我們開始讓這個(gè)ul隱藏,點(diǎn)擊的時(shí)候出來.所以也要獲取他的id,
stateList=document.getElementById('loginStatePanel'),
這個(gè)列表取出來以后,我們鼠標(biāo)劃過列表的時(shí)候,還有點(diǎn)擊的時(shí)候,都是在li上操作,所以li也要被取出來.
lis=stateList.getElementsByTagName('li'),
當(dāng)我們選擇狀態(tài)的時(shí)候的時(shí)候,我們點(diǎn)擊選擇他,然后顯示的狀態(tài)應(yīng)該是他的文字顯示,比如'忙碌',所以我們也要得到他的狀態(tài)文本的id
stateTxt=document.getElementById('login2qq_state_txt'),
看起來該獲取的id也都的到了,現(xiàn)在我們來看看事件
首先是鼠標(biāo)點(diǎn)擊將整個(gè)ul顯示出來
loginState.onclick=function(e){
e = e || window.event;
//
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}//阻止事件冒泡
stateList.style.display='block';
}
接下來鼠標(biāo)劃過,點(diǎn)擊,離開的事件
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.style.background='#567';
}//鼠標(biāo)劃過事件,背景變灰
lis[i].onmouseout=function(){
this.style.background='#FFF';
}//鼠標(biāo)厲害事件,背景變白
lis[i].onclick=function(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}//我們?cè)邳c(diǎn)擊的時(shí)候要組織事件冒泡.
//鼠標(biāo)點(diǎn)擊事件,事件是把選中的li里面的文本得到,放到顯示的div中,點(diǎn)擊之后面板還要隱藏.
是因?yàn)槟泓c(diǎn)div的時(shí)候讓他顯示列表,點(diǎn)li的時(shí)候又讓他隱藏,可是你點(diǎn)擊li的時(shí)候事件就會(huì)冒泡到ul,就會(huì)冒泡到div,所以就不會(huì)隱藏.
var id=this.id;
//將點(diǎn)擊的id取出來
stateList.style.display='none';
//點(diǎn)擊之后隱藏列表 stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
//改變內(nèi)容
改變內(nèi)容的時(shí)候還得把選中的classname給顯示的面板div
loginStateShow.className='';
loginStateShow.className='login-state-show '+id;
}
}
之后我們需要的功能是,在點(diǎn)開列表的情況下,我們?cè)邳c(diǎn)擊空白處的時(shí)候隱藏列表,就需要在document上幫一個(gè)事件
document.onclick=function(){
stateList.style.display='none';
}
}
最后我們來總結(jié)一下:
首先,在沒有操作的時(shí)候我們需要列表時(shí)隱藏的,我們選擇點(diǎn)擊的時(shí)候顯示ul,鼠標(biāo)劃過的時(shí)候放到背景顏色改變,將文本內(nèi)容放到顯示的div,然后狀態(tài)完成改變.
