一.html框架

<divid=line-share>/*整个分享横栏区域*//*分享横栏区域内的分享网站*/<ulid="item"><li><ahref="#"id="spec">分享到:</a></li><liid="item1"><ahref="#">QQ空间</a></li>/*当鼠标移动到各个分享网站上，会下方弹出一条文字信息*/<divid="tip1">分享到QQ空间</div><liid="item7"><ahref="#"id="more">更多...</a></li>/*当鼠标移动到更多标签上，会弹出了弹窗区域，显示所有的分享网站*/<divid="tip7"><h4><imgsrc="../img/chaohao.png">分享到更多网站</h4><ul><li><ahref="#">一键分享</a></li></ul></div></ul></div>

二．Js实现

window.onload=function(){varitem=document.getElementById('item');vartips=document.getElementsByClassName('tip');varlis=document.getElementsByClassName('firtli');varmore=document.getElementById('more');varmoreArea=document.getElementById('moreArea');varclose=document.getElementsByClassName('close');item.addEventListener("mouseover",move,false);//当鼠标移动到ul区域时，不同的li标签进行不同的处理，利用了事件代理的机制：把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。functionmove(event){varevent=event||window.event;vartarget=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显示信息隐藏functionmissAllExceptThis(index){for(vari=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);}

三.效果图

初始样式

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

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