每天學一個jquery外掛-滑鼠的特效
阿新 • • 發佈：2021-01-26
技術標籤：每天學一個jquery外掛javascriptjquery
每天一個jquery外掛-滑鼠的特效
滑鼠的特效
嗯，按照自己的想法做了滑鼠的特效，沒錯就是那種很多頁面背景上滑鼠帶著的各種特效，我這樣子搞能弄出比較簡單的動畫效果出來
效果
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑鼠的特效</title>
<script src="js/jquery-3.4.1.min.js" css部分
.rel {
position: absolute;
overflow: hidden;
z-index: 2;
}
.item {
position js部分
var sbdtx = function(id){
$id = $("#"+id);
$id.addClass("rel");
$clone = $id.clone();
$clone.addClass("clone");
$clone.appendTo($id.parent())
return {
$id:$id,
$clone:$clone,
count:0,
load:function(){
var that =this;
that.$id.mousemove(function(e){
if(that.count==0){
temp = {
"top":e.offsetY,
"left":e.offsetX,
"color":"rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
};
var index = Math.floor(Math.random()*10);
var $item = $("<div class='item'>"+index+"</div>")
$item.css(temp)
$item.appendTo(that.$clone)
setTimeout(function(){
$item.remove();
},1000)
}
that.count++;
that.count=that.count%10;
})
}
}
}
思路部分
- 用mousemove檢測到滑鼠的位置，然後再在對應位置畫上對應效果的dom，最後給個計時器定時刪掉它，當然這就是上面的一部分
- 除此之外還有的就是我通過累計觸發的次數，通過取餘控制了事件的觸發頻率，我感覺這個引數是很必要的
- 初次之外用了動畫幀然這個新增上去的dom本身就有一個動畫帶著它“運動”，所以就能很容易的產生動畫的效果
- 最後去掉不要的內容，效果就差不多了
- ps這個動畫效果是個很神奇的東西，比如很多粒子效果都是可以直接或者間接通過動畫幀實現的，比如火花特效，就是那種產生的粒子隨機散射的效果，我們完全可以寫很多個動畫幀標上序號，然後隨機取到一個序號給到dom裡面，這樣子就有了粒子四散的假象，假如你寫的多真的效果很舒服的，當然大小，明暗，透明這些屬性也都是可以分門別類的寫出效果的
- 然後就是各種刀光劍影的效果，我一開始也不知道該怎麼畫出來，不過想了想，就我們現在有的倆基礎引數也是可以粗略的模仿出來，就比如我們記下前後倆組引數，這樣子我們就能通過兩點連成線，知道了它的角度和滑鼠本身觸發的時機，然後直接根據不同角度畫出動畫效果，假如我們寫的精細點每分角度都有各自效果，然後動畫有由細到粗再細到消失的過程，感覺這樣也能很好的弄出一閃而過的動畫效果，不過我不知道轉折處咋通過倆引數進行處理，可能這就需要記錄更組引數了吧
- 此外還有比較常見的一個簡單飛機飛行的特效也是可以用剛才方法做的，就是把飛機畫在中心，然後通過監控滑鼠落點與中心的角度控制飛機的角度，然後就是通過不同角度執行不同的動畫，就是把無限repeat的背景圖片朝一個方向拖走，這樣子是不是有點那種飛行的感覺了呢，額，明天試試，碎覺~