效果圖：
說實話，看到很多別的網(wǎng)站上的好的效果抛杨，就很想學(xué)够委！但是很多時候會發(fā)現(xiàn)自己無從下手 ??，此篇文章的效果也算是琢磨了兩天怖现，才知道原來是這么寫的茁帽，原來還挺簡單的。
首先屈嗤，你如果想實現(xiàn)一個標(biāo)簽跟隨鼠標(biāo)移動潘拨，這個效果其實并不難。但是當(dāng)你寫好之后恢共，會發(fā)現(xiàn)一些點擊和鼠標(biāo)移入效果战秋，無法實現(xiàn)了??(原因：因為跟隨的標(biāo)簽璧亚，往往會在內(nèi)容之上讨韭，所以你再怎么點擊也就是點擊的移動跟隨的那個標(biāo)簽脂信，壓根就點不到下面的標(biāo)簽~~~ 氣不氣??)
你可能會想到用（但是你又會發(fā)現(xiàn)，每當(dāng)移入到點擊的標(biāo)簽上時透硝，跟隨鼠標(biāo)的那個標(biāo)簽不見了狰闪。因為你設(shè)置了圖層，所以它被壓在了最下面濒生，你肯定不想要這種效果~~）
z-index:-1;
用這個CSS屬性就能解決以上的糾結(jié)Ｂ癖谩！
(是不是很簡單罪治，但是往往在你不知道的情況下丽声，根本想不起來這個東西 ??)
還是看人家的效果，然后下載下來慢慢研究的 http://www.jq22.com/jquery-info22482
pointer-events: none; //禁止選擇器方法
當(dāng)然觉义，簡單的解決上面的雁社，肯定遠(yuǎn)遠(yuǎn)不夠的，在學(xué)習(xí)當(dāng)中又發(fā)現(xiàn)了
mix-blend-mode: difference; //背景混合
具體就是用在鼠標(biāo)移入時的效果晒骇，想深入了解的可以參考http://www.reibang.com/p/7a6fe5d29252
知識點:
1.e.screenX霉撵，e.clientX ，e.pageX三者的區(qū)別
screenX:鼠標(biāo)位置相對于用戶屏幕水平偏移量洪囤，而screenY也就是垂直方向的徒坡，此時的參照點也就是原點是屏幕的左上角。
clientX:跟screenX相比就是將參照點改成了瀏覽器內(nèi)容區(qū)域的左上角瘤缩，該參照點會隨之滾動條的移動而移動喇完。因此此處用的是 clientX
pageX:參照點也是瀏覽器內(nèi)容區(qū)域的左上角，但它不會隨著滾動條而變動.
下面就是我整體應(yīng)用起來的代碼了??
代碼如下：
<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 //圓框?qū)捀? }
},
mounted() {
//注意：此處針對樣式的放大款咖，是通過 TweenLite.to(bk, 0.3, { x: x軸, y: y軸, scale: 1.3 })何暮，而不是直接通過添加樣式 transform: scale();
//因為 TweenLite 是相對于 transform：translate() 進行位置確定的，而不是 top,left
//所以單純的修改 transform: scale() 會造成位置坐標(biāo)歸0
this.MouseMove('.box', 'incursor-bck')
this.MouseMove('.text', 'incursor-bck-text')
this.MouseClick()
},
methods: {
//鼠標(biāo)移動時相關(guān)樣式的添加 (el 為鼠標(biāo)移入的標(biāo)簽铐殃， cl 為鼠標(biāo)移入該標(biāo)簽內(nèi)更改鼠標(biāo)的樣式)
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 //小點 默認(rèn)位置偏移量
let bk_w = _this.bk_w / 2 //圓框 默認(rèn)位置偏移量
//監(jiān)聽鼠標(biāo)移動
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++)
//移入定義標(biāo)簽時海洼，放大圓框
(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) //給圓框添加樣式
}),
//移除定義標(biāo)簽時，恢復(fù)樣式
(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)
//當(dāng)鼠標(biāo)不在瀏覽器窗口范圍內(nèi)時富腊，隱藏起來
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
}
})
},
//鼠標(biāo)點擊時坏逢，相關(guān)樣式的添加
MouseClick() {
let _this = this
let dt = document.querySelector('.mouseMove-dot')
let bk = document.querySelector('.mouseMove-bck')
let dt_w = _this.dt_w / 2 //小點 默認(rèn)位置偏移量
let bk_w = _this.bk_w / 2 //圓框 默認(rèn)位置偏移量
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
//松開時恢復(fù)原來大小
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>
//消除鼠標(biāo)樣式
.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;
}
// 鼠標(biāo)點擊樣式
.click-dot {
opacity: 0;
}
.click-bck {
border: 2px solid #77f3de;
}
//鼠標(biāo)移入樣式
.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>
給大家推薦幾個素材網(wǎng)站:
http://www.jq22.com/ ??各種插件，功能等(建議主 + )
https://greensock.com/showcase/ ??各種大佬整的網(wǎng)頁效果
