Js實現(xiàn)一鍵分享效果--懸浮框狀態(tài)

一．html框架

/*整個分享區(qū)域*/
   <div id="share">
        /*分享區(qū)域的頂端文字描述*/
             <h4><img src="../img/chaohao.png">分享到...</h4>
        /*分享區(qū)域的的具體分享網(wǎng)站鏈接*/
             <ul>
                   <li><a href="#">一鍵分享</a></li>
                    ...
            </ul>
      /*分享區(qū)域的底端信息描述*/
               <div><a href="#">oscer分享</a></div>
      /*分享區(qū)域的懸浮狀態(tài)框，此設(shè)計中是引入一張分享懸浮框的圖片，根據(jù)定位放置到合適的位置*/
             <div id='shareTag'></div>
</div>

二．Js實現(xiàn)

           其實也很簡單，就是使用position控制進行隱藏，以及出現(xiàn)，并加上動態(tài)效果,就可以完成。

window.onload = function(){

       var shareArea = document.getElementById('share');
       var exit = document.getElementsByClassName('close');
       var more = document.getElementById('more');
       var moreArea  = document.getElementById('moreArea');

       //鼠標(biāo)移入分享區(qū)域，分享區(qū)域內(nèi)容呈現(xiàn)
           shareArea.addEventListener("mouseover",function(){      

       	       shareArea.style.top = '0';
       	       shareArea.style.left = '0';   
            //添加一個動畫效果
       	       shareArea.className = 'animate';    
       	 
           },false);

        //鼠標(biāo)移出分享區(qū)域，分享區(qū)域內(nèi)容消失
           shareArea.addEventListener("mouseout",function(){       
 
       	     shareArea.style.top = '0';
       	     shareArea.style.left = '-280px';      
       	     shareArea.className = 'animate';     
       	 
            },false);

       //點擊差號分享內(nèi)容區(qū)域整個消失
          exit[0].addEventListener("click",function(){       
       	    shareArea.style.display = 'none';
       	 
          },false);

      //點擊更多選項彈出所有的分享內(nèi)容
          more.addEventListener("click",function(){
          	     shareArea.style.display = 'none';     	 
                 moreArea.style.display = 'block';
          },false);

          exit[1].addEventListener("click",function(){      
       	    moreArea.style.display = 'none';
       	 
          },false);
        
	}

三.效果圖

鼠標(biāo)移動到這個圖片上，整個分享區(qū)域緩緩從左邊出來，如下圖：

鼠標(biāo)移除這個區(qū)域，整個區(qū)域又緩緩從左邊消失，回到最初狀態(tài)，當(dāng)點擊上面的差號時，整個分享區(qū)域全部從頁面中消失。