監控鼠標的位置點擊實現圓形擴散動畫

首先看效果圖如下：

一、要實現如下的效果我們先分析都要什么？

1：首先我們要先實現這個動畫擴散效果。

2：然后當鼠標點擊該標簽時，你需要在他的下面新增一個標簽並把這個動畫給這個新增標簽。

3：其次我們要監控鼠標的位置。

4：在其次找到被點擊的標簽的位置與鼠標點擊位置相減就是這個做動畫的標簽的初始位置。

5：讓這個標簽到相應位置之后再做動畫。

二、實現效果

1：頁面增加一個div標簽改變他的樣式

.bg{
      background: silver;
      height: 50px;
      width: 200px;
      overflow: hidden;
      position: relative;
      top: 100px;
      left: 100px;
    }

 

<div class="bg"></div>

2：實現圓形擴散效果

cs3新增了酷炫的動畫，就拿animation來說它可以讓一個元素旋轉、放大、平移....，而我們這里要用到的就是放大（縮小）scale（x，y），他有兩個參數x和y，而x是在x軸放大（縮小）的倍數，y是在y軸上放大（縮小）的倍數。當你只有一個參數時默認就是x y放大（縮小）同樣的倍數代碼如下。

.sp{
      position: absolute;
      top: 0px;
      left: 0px;
      background: skyblue;
      width:1px;
      height: 1px;
      border-radius: 0.5px; 
      animation: anima 2s;  
    }
    @keyframes anima{
    from{transform: scale(1);
    opacity: 1;}
    to{ transform: scale(400);
    opacity: 0;}
   } 

你只需要在這個div上綁定事件每點擊一次新增加一個span標簽把這個類給span即可（這里注意每次新增span標簽之前要把上次的span標簽移除）。

3：獲得鼠標點擊的位置。

通過jQuery給我們提供的event.pageX，event.pageY來獲得當前鼠標點擊的位置。

我們在這個div上綁定事件來獲得鼠標點擊的位置代碼如下：

$('.bg').bind('mousedown',function(e){
         x= e.pageX ;
         y= e.pageY;
        console.log(x);
        console.log(y);
      });

輸出結果如下：

可以看出我們已經獲得了鼠標點擊的位置。

4：獲得當前標簽的位置

我們還要獲得這個div相對於窗口的偏移位置，然后與鼠標點擊位置相減獲得我們做動畫的span標簽的top和left值。

jQuery為我們提供了offset方法這個方法可以獲得當前元素相對於窗口的偏移位置，這個位置是相對於匹配元素的左上角的位置用法如下。

$('.bg').click(function(){
            var d= $(this).offset();
             console.log(d.left);
             console.log(d.top);
          })

5：實現最終效果

這里我們已經獲得了兩個位置，他們相減之后就是做動畫的span的top和left。我把它封裝到一個move函數里面你只需要給他傳遞一個id就能讓相應的標簽有這個動畫效果。代碼如下：

function spread(id){
      var x;
      var y;
      $(id).bind('mousedown',function(e){
         x= e.pageX ;
         y= e.pageY;
      
      });
       
      $(id).click(function(){
        var d= $(this).offset();
         x=x-d.left;
         y=y-d.top;
      $('span').remove()
      $(id).append("<span class=sp></span>");
      $('.sp').css({
          top:y,
          left:x,
        })
      })
    }
   spread('.bg');

 好了效果已經實現了有沒有很酷炫！0.0