js實現一鍵分享效果---橫欄狀態

一.html框架

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

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

二．Js實現

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);	
//當鼠標移動到ul區域時，不同的li標簽進行不同的處理，利用了事件代理的機制：把原本需要綁定的事件委托給父元素，讓父元素擔當事件監聽的職務。
	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);           	  
            	  
                 
            }
		} 
		//該函數用來當鼠標移動到哪個標簽上，只有該標簽下的div顯示，其他li標簽下的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';

                         }
                }


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

三.效果圖

初始樣式

當鼠標移入到各個網站上，會顯示

當鼠標移動到更多標簽上，顯示如下：