效果图：
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/ 😘各种大佬整的网页效果
网友评论