一．html框架

/*整个分享区域*/   
     
              /*分享区域的顶端文字描述*/             
      
       
        分享到...
       
        /*分享区域的的具体分享网站链接*/             
      
                          
       
        
         一键分享
        
                    ...            
      
      /*分享区域的底端信息描述*/               
      
       
        oscer分享
       
      
      /*分享区域的悬浮状态框，此设计中是引入一张分享悬浮框的图片，根据定位放置到合适的位置*/             
      
     

二．Js实现

           其实也很简单，就是使用position控制进行隐藏，以及出现，并加上动态效果,就可以完成。

window.onload = function(){       var shareArea = document.getElementById('share');       var exit = document.getElementsByClassName('close');       var more = document.getElementById('more');       var moreArea  = document.getElementById('moreArea');       //鼠标移入分享区域，分享区域内容呈现           shareArea.addEventListener("mouseover",function(){             	       shareArea.style.top = '0';       	       shareArea.style.left = '0';               //添加一个动画效果       	       shareArea.className = 'animate';           	            },false);        //鼠标移出分享区域，分享区域内容消失           shareArea.addEventListener("mouseout",function(){               	     shareArea.style.top = '0';       	     shareArea.style.left = '-280px';             	     shareArea.className = 'animate';            	             },false);       //点击差号分享内容区域整个消失          exit[0].addEventListener("click",function(){              	    shareArea.style.display = 'none';       	           },false);      //点击更多选项弹出所有的分享内容          more.addEventListener("click",function(){          	     shareArea.style.display = 'none';     	                  moreArea.style.display = 'block';          },false);          exit[1].addEventListener("click",function(){             	    moreArea.style.display = 'none';       	           },false);        	}

三.效果图

鼠标移动到这个图片上，整个分享区域缓缓从左边出来，如下图：

鼠标移除这个区域，整个区域又缓缓从左边消失，回到最初状态，当点击上面的差号时，整个分享区域全部从页面中消失。