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);
		
	}

三.效果图

初始样式

当鼠标移入到各个网站上，会显示

当鼠标移动到更多标签上，显示如下：