一.html框架
/*整个分享区域*/ <div id="share"> /*分享区域的顶端文字描述*/ <h3><img src="../img/chaohao.png">分享到...</h3> /*分享区域的的具体分享网站链接*/ <ul> <li><a href="#">一键分享</a></li> ... </ul> /*分享区域的底端信息描述*/ <div><a href="#">oscer分享</a></div> /*分享区域的悬浮状态框,此设计中是引入一张分享悬浮框的图片,根据定位放置到合适的位置*/ <div id='shareTag'></div> </div>
二.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); }
三.效果图
鼠标移动到这个图片上,整个分享区域缓缓从左边出来,如下图:
鼠标移除这个区域,整个区域又缓缓从左边消失,回到最初状态,当点击上面的差号时,整个分享区域全部从页面中消失。