Js實現一鍵分享效果--懸浮框狀態

一．html框架

/*整個分享區域*/
   <div id="share">
        /*分享區域的頂端文字描述*/
             <h4><img src="../img/chaohao.png">分享到...</h4>
        /*分享區域的的具體分享網站鏈接*/
             <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);
        
	}

三.效果圖

鼠標移動到這個圖片上，整個分享區域緩緩從左邊出來，如下圖：

鼠標移除這個區域，整個區域又緩緩從左邊消失，回到最初狀態，當點擊上面的差號時，整個分享區域全部從頁面中消失。