js實(shí)現(xiàn)一鍵分享效果---橫欄狀態(tài)

一.html框架

<div id=line-share>/*整個(gè)分享橫欄區(qū)域*/
/*分享橫欄區(qū)域內(nèi)的分享網(wǎng)站*/
<ul id="item">
    <li><a href="#" id="spec">分享到:</a></li>
<li id="item1"><a href="#">QQ空間</a></li>
         /*當(dāng)鼠標(biāo)移動(dòng)到各個(gè)分享網(wǎng)站上，會(huì)下方彈出一條文字信息*/
<div   id="tip1">分享到QQ空間</div>
<li id="item7"><a href="#" id="more">更多...</a></li>
         /*當(dāng)鼠標(biāo)移動(dòng)到更多標(biāo)簽上，會(huì)彈出了彈窗區(qū)域，顯示所有的分享網(wǎng)站*/
<div id="tip7">
 <h4><img src="../img/chaohao.png">分享到更多網(wǎng)站</h4>
      <ul>
<li><a href="#">一鍵分享</a></li>

</ul>
</div>
</ul>
</div>

二．Js實(shí)現(xiàn)

window.onload = function(){
		var item =document.getElementById('item');
		var tips = document.getElementsByClassName('tip');
		var lis = document.getElementsByClassName('firtli');
		var more = document.getElementById('more');
        var moreArea  = document.getElementById('moreArea');
        var close = document.getElementsByClassName('close');
		item.addEventListener("mouseover",move,false);	
//當(dāng)鼠標(biāo)移動(dòng)到ul區(qū)域時(shí)，不同的li標(biāo)簽進(jìn)行不同的處理，利用了事件代理的機(jī)制：把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。
	function move(event){
            var event = event||window.event;
            var target=event.target||event.srcElement; 
            switch(target.id){
            	case "item1": 
            	    missAllExceptThis(0);          	
            	    break;
                case "item2":            	   
            	 missAllExceptThis(1);
            	  break;
                case "item3":            	   
            	  missAllExceptThis(2);
            	  break;
            	 case "item4":            	   
            	  missAllExceptThis(3);
            	  break;
            	   case "item5":            	   
            	  missAllExceptThis(4);
            	  break;
            	   case "item6":            	   
            	  missAllExceptThis(5);
            	  break; 
            	  case "item7":
            	  missAllExceptThis(6);           	  
            	  
                 
            }
		} 
		//該函數(shù)用來當(dāng)鼠標(biāo)移動(dòng)到哪個(gè)標(biāo)簽上，只有該標(biāo)簽下的div顯示，其他li標(biāo)簽下的div顯示信息隱藏
		function missAllExceptThis(index){			  
              
                for(var i=0;i<lis.length;i++){
                         if(index!=i){
                         	tips[i].style.display = 'none';
                         }
                         else{
                         	tips[i].style.display = 'block';

                         }
                }


		}
		//點(diǎn)擊更多彈窗里面的差號，更多分享的彈窗直接消失
		close[0].addEventListener("click",function(){
                   tips[6].style.display = 'none';
		},false);
		
	}

三.效果圖

初始樣式

當(dāng)鼠標(biāo)移入到各個(gè)網(wǎng)站上，會(huì)顯示

當(dāng)鼠標(biāo)移動(dòng)到更多標(biāo)簽上，顯示如下：