监控鼠标的位置点击实现圆形扩散动画

Posted 2020-07-12

首先看效果图如下：

一、要实现如下的效果我们先分析都要什么？

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