一．html框架

/*整个分享区域*/<divid="share">/*分享区域的顶端文字描述*/<h4><imgsrc="../img/chaohao.png">分享到...</h4>/*分享区域的的具体分享网站链接*/<ul><li><ahref="#">一键分享</a></li>...</ul>/*分享区域的底端信息描述*/<div><ahref="#">oscer分享</a></div>/*分享区域的悬浮状态框，此设计中是引入一张分享悬浮框的图片，根据定位放置到合适的位置*/<divid='shareTag'></div></div>

二．Js实现

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

window.onload=function(){varshareArea=document.getElementById('share');varexit=document.getElementsByClassName('close');varmore=document.getElementById('more');varmoreArea=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);}


三.效果图

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

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