Vue<自定义鼠标指针效果>

效果图：

mouseMove.gif

说实话，看到很多别的网站上的好的效果，就很想学！但是很多时候会发现自己无从下手 😂，此篇文章的效果也算是琢磨了两天，才知道原来是这么写的，原来还挺简单的。

首先，你如果想实现一个标签跟随鼠标移动，这个效果其实并不难。但是当你写好之后，会发现一些点击和鼠标移入效果，无法实现了😱(原因：因为跟随的标签，往往会在内容之上，所以你再怎么点击也就是点击的移动跟随的那个标签，压根就点不到下面的标签~~~ 气不气😡)

你可能会想到用（但是你又会发现，每当移入到点击的标签上时，跟随鼠标的那个标签不见了。因为你设置了图层，所以它被压在了最下面，你肯定不想要这种效果~~）

z-index:-1;

用这个CSS属性就能解决以上的纠结！！
(是不是很简单，但是往往在你不知道的情况下，根本想不起来这个东西 🙃)
还是看人家的效果，然后下载下来慢慢研究的 http://www.jq22.com/jquery-info22482

 pointer-events: none; //禁止选择器方法

当然，简单的解决上面的，肯定远远不够的，在学习当中又发现了

 mix-blend-mode: difference; //背景混合

具体就是用在鼠标移入时的效果，想深入了解的可以参考https://www.jianshu.com/p/7a6fe5d29252

知识点:
1.e.screenX，e.clientX ，e.pageX三者的区别

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。因此此处用的是 clientX
pageX:参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动.

下面就是我整体应用起来的代码了👍

代码如下：

<template>
  <div class="overall">
    <div class="mouseMove-dot" :style="`width:${dt_w}px;height:${dt_w}px`"></div>
    <div class="mouseMove-bck" :style="`width:${bk_w}px;height:${bk_w}px`"></div>
    <div id="box">
      <div class="box">HOVER</div>
      <span class="text">mouse</span>
    </div>
  </div>
</template>

<script>
import { TweenLite } from 'gsap'
export default {
  data() {
    return {
      w: window.innerWidth, //窗口宽
      h: window.innerHeight, //窗口高
      dt_w: 4, //小点宽高
      bk_w: 50 //圆框宽高
    }
  },
  mounted() {
    //注意：此处针对样式的放大，是通过 TweenLite.to(bk, 0.3, { x: x轴, y: y轴, scale: 1.3 })，而不是直接通过添加样式 transform: scale();
    //因为 TweenLite 是相对于 transform：translate() 进行位置确定的，而不是 top,left
    //所以单纯的修改 transform: scale() 会造成位置坐标归0
    this.MouseMove('.box', 'incursor-bck')
    this.MouseMove('.text', 'incursor-bck-text')
    this.MouseClick()
  },
  methods: {
    //鼠标移动时相关样式的添加 (el 为鼠标移入的标签， cl 为鼠标移入该标签内更改鼠标的样式)
    MouseMove(el, cl) {
      let _this = this
      let dt = document.querySelector('.mouseMove-dot') //小点
      let bk = document.querySelector('.mouseMove-bck') //圆框
      let dt_w = _this.dt_w / 2 //小点 默认位置偏移量
      let bk_w = _this.bk_w / 2 //圆框 默认位置偏移量
      //监听鼠标移动
      window.addEventListener('mousemove', function(e) {
        let x = e.clientX
        let y = e.clientY
        TweenLite.to(dt, 0.5, {
          ease: Back.easeOut.config(1.7),
          x: x - dt_w,
          y: y - dt_w
        })
        TweenLite.to(bk, 1, {
          ease: Back.easeOut.config(1.7),
          x: x - bk_w,
          y: y - bk_w
        })

        let o = document.querySelectorAll(el)
        for (let e = 0; e < o.length; e++)
          //移入定义标签时，放大圆框
          (o[e].onmouseenter = function() {
            TweenLite.to(bk, 0.3, {
              x: x - bk_w,
              y: y - bk_w,
              scale: 1.3
            })
            dt.classList.add('incursor-dot') //隐藏小点
            bk.classList.add(cl) //给圆框添加样式
          }),
            //移除定义标签时，恢复样式
            (o[e].onmouseleave = function() {
              TweenLite.to(bk, 0.3, {
                x: x - bk_w,
                y: y - bk_w,
                scale: 1
              })
              dt.classList.remove('incursor-dot')
              bk.classList.remove(cl)
            })
        console.log(x, y)

        //当鼠标不在浏览器窗口范围内时，隐藏起来
        if (_this.w <= x + 5 || _this.h <= y + 5 || x < 5 || y < 5) {
          dt.style.opacity = 0
          bk.style.opacity = 0
        } else {
          dt.style.opacity = 1
          bk.style.opacity = 1
        }
      })
    },
    //鼠标点击时，相关样式的添加
    MouseClick() {
      let _this = this
      let dt = document.querySelector('.mouseMove-dot')
      let bk = document.querySelector('.mouseMove-bck')
      let dt_w = _this.dt_w / 2 //小点 默认位置偏移量
      let bk_w = _this.bk_w / 2 //圆框 默认位置偏移量
      window.addEventListener('mousedown', function(e) {
        let x = e.clientX
        let y = e.clientY
        //点击时放大圆框
        TweenLite.to(bk, 0.3, {
          x: x - bk_w,
          y: y - bk_w,
          scale: 1.8
        })
        dt.classList.add('click-dot')
        bk.classList.add('click-bck')
      })
      window.addEventListener('mouseup', function(e) {
        let x = e.clientX
        let y = e.clientY
        //松开时恢复原来大小
        TweenLite.to(bk, 0.3, {
          x: x - bk_w,
          y: y - bk_w,
          scale: 1
        })
        dt.classList.remove('click-dot')
        bk.classList.remove('click-bck')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
//消除鼠标样式
.overall {
  cursor: none;
}
.text {
  display: inline-block;
  font-size: 25px;
  font-weight: 200;
  padding: 20px;
  color: #77f3de;
}
.box {
  width: 200px;
  height: 200px;
  background: rgb(29, 192, 204);
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
  opacity: 0.8;
  &:hover {
    background: rgb(29, 204, 151);
  }
}
.mouseMove-dot,
.mouseMove-bck {
  user-select: none;
  pointer-events: none; //禁止选择器方法
  mix-blend-mode: difference; //背景如何混合
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 999;
  opacity: 0;
}
.mouseMove-dot {
  background: #686868;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}
.mouseMove-bck {
  border: 2px solid #575757;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transition: border 0.3s, opacity 0.3s, background 0.5s;
}

// 鼠标点击样式
.click-dot {
  opacity: 0;
}
.click-bck {
  border: 2px solid #77f3de;
}
//鼠标移入样式
.incursor-dot {
  background: transparent;
}
.incursor-bck {
  border: 2px solid transparent;
  background: #fff;
}
.incursor-bck-text {
  border: 2px solid transparent;
  background: rgb(240, 221, 113);
}
</style>

给大家推荐几个素材网站:
http://www.jq22.com/ 😎各种插件，功能等(建议主 + )
https://greensock.com/showcase/ 😘各种大佬整的网页效果