溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript如何實現(xiàn)鼠標拖尾特效，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
看完這個保證你有手就行,制作各種好看的小尾巴!
全部代碼如下,看注釋可以輕易看懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div樣式*/
#main{
width: auto;height: 1500px;margin: 0;background-color: black;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
//==========鼠標星球尾巴JS代碼============
//========函數(shù):獲取當前鼠標的坐標=========
function getMousePosition(event) {
var x = 0;//x坐標
var y = 0;//y坐標
//documentElement 返回一個文檔的文檔元素。
doc = document.documentElement;
//body 返回文檔的body元素
body = document.body;
//解決兼容性
if (!event) event = window.event;
//解決鼠標滾輪滾動后與相對坐標的差值
//pageYoffset是Netscape特有
if (window.pageYoffset) {
x = window.pageXOffset;
y = window.pageYOffset;
} else {//其他瀏覽器鼠標滾動
x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc && doc.clientLeft || body && body.clientLeft || 0);
y = (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc && doc.clientTop || body && body.clientTop || 0);
}
//得到的x加上當事件被觸發(fā)時鼠標指針向?qū)τ跒g覽器頁面（或客戶區(qū)）的水平坐標
x += event.clientX;
//得到的x加上當事件被觸發(fā)時鼠標指針向?qū)τ跒g覽器頁面（或客戶區(qū)）的垂直坐標
y += event.clientY;
//返回x和y
return {'x': x, 'y': y};
}
//========函數(shù):獲取當前鼠標的坐標=========
//=====生成從minNum到maxNum的隨機數(shù)=====
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
default:
return 0;
}
}
//=====生成從minNum到maxNum的隨機數(shù)======
//======給整個文檔綁定一個鼠標移動事件======
document.onmousemove = function(event){
// 在頁面創(chuàng)建一個標簽，（這里是創(chuàng)建一個自定義標簽styleImg ）
var styleImg = document.createElement("div");
//獲取隨機數(shù)1-5,根據(jù)隨機數(shù)來設(shè)置標簽的樣式
var r = randomNum(1,5);
switch (r) {
case 1:
//設(shè)置圖片的路徑,根據(jù)不同的路徑就可以更改成不同的樣式
styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
break;
case 2:
styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
break;
case 3:
styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
break;
case 4:
styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
break;
case 5:
styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
break;
}
// 由于要設(shè)置動畫，設(shè)置left 和top，因此，必須要設(shè)置定位
styleImg.style.position = 'absolute'
// 設(shè)置標簽的初始位置，即鼠標的當前位置
var x = getMousePosition(event).x;
var y = getMousePosition(event).y;
// 設(shè)置styleImg的坐標
styleImg.style.top = y +"px";
styleImg.style.left = x + "px";
//綁定testDiv為當前鼠標小尾巴生效的區(qū)域
var testDiv = document.getElementById("main");
// 將新建的標簽加到頁面的 body標簽中
testDiv.appendChild(styleImg);
// 在文檔中有超出的地方就會不顯示，所以盡量綁定到頁面的div中
// 設(shè)置溢出隱藏，為了防止鼠標在移動的過程中會觸發(fā)上下滾動條
testDiv.style.overflow = 'hidden';
//
var count = 0;
//setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式
var time = setInterval(function(){
// 設(shè)置定時器 ，讓每一次生成的標簽在指定的周期內(nèi)修改相應的透明度
count += 5;
styleImg.style.opacity = (100-count)/100 ;
}, 30)
// setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。
// 設(shè)置延時定時器， 在一定的時間后清除上面的定時器，讓創(chuàng)建的標簽不再進行變化
setTimeout(function(){
// 使用 clearInterval() 來停止執(zhí)行setInterval函數(shù)
clearInterval(time);
// 刪除創(chuàng)建的標簽
testDiv.removeChild(styleImg);
},250)
}
</script>
</body>
</html>ps:以上代碼參考了多篇不同的文獻后自己敲的,沒有面向VC寫博客哦!
最后把圖片素材送給你們吧,只要在上面代碼中做簡單的修改,便可以實現(xiàn)其他樣式的小尾巴
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript如何實現(xiàn)鼠標拖尾特效”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼