看完這個保證你有手就行,制作各種好看的小尾巴!
全部代碼如下,看注釋可以輕易看懂
<!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代碼============
//========函式:獲取當前滑鼠的坐標=========
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加上當事件被觸發時滑鼠指標向對于瀏覽器頁面（或客戶區）的水平坐標
x += event.clientX;
//得到的x加上當事件被觸發時滑鼠指標向對于瀏覽器頁面（或客戶區）的垂直坐標
y += event.clientY;
//回傳x和y
return {'x': x, 'y': y};
}
//========函式:獲取當前滑鼠的坐標=========
//=====生成從minNum到maxNum的亂數=====
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的亂數======
//======給整個檔案系結一個滑鼠移動事件======
document.onmousemove = function(event){
// 在頁面創建一個標簽，（這里是創建一個自定義標簽styleImg ）
var styleImg = document.createElement("div");
//獲取亂數1-5,根據亂數來設定標簽的樣式
var r = randomNum(1,5);
switch (r) {
case 1:
//設定圖片的路徑,根據不同的路徑就可以更改成不同的樣式
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;
}
// 由于要設定影片，設定left 和top，因此，必須要設定定位
styleImg.style.position = 'absolute'
// 設定標簽的初始位置，即滑鼠的當前位置
var x = getMousePosition(event).x;
var y = getMousePosition(event).y;
// 設定styleImg的坐標
styleImg.style.top = y +"px";
styleImg.style.left = x + "px";
//系結testDiv為當前滑鼠小尾巴生效的區域
var testDiv = document.getElementById("main");
// 將新建的標簽加到頁面的 body標簽中
testDiv.appendChild(styleImg);
// 在檔案中有超出的地方就會不顯示，所以盡量系結到頁面的div中
// 設定溢位隱藏，為了防止滑鼠在移動的程序中會觸發上下滾動條
testDiv.style.overflow = 'hidden';
//
var count = 0;
//setInterval() 方法可按照指定的周期（以毫秒計）來呼叫函式或計算運算式
var time = setInterval(function(){
// 設定定時器 ，讓每一次生成的標簽在指定的周期內修改相應的透明度
count += 5;
styleImg.style.opacity = (100-count)/100 ;
}, 30)
// setTimeout() 方法用于在指定的毫秒數后呼叫函式或計算運算式，
// 設定延時定時器， 在一定的時間后清除上面的定時器，讓創建的標簽不再進行變化
setTimeout(function(){
// 使用 clearInterval() 來停止執行setInterval函式
clearInterval(time);
// 洗掉創建的標簽
testDiv.removeChild(styleImg);
},250)
}
</script>
</body>
</html>
ps:以上代碼參考了多篇不同的文獻后自己敲的,沒有面向VC寫博客哦!
最后把圖片素材送給你們吧,只要在上面代碼中做簡單的修改,便可以實作其他樣式的小尾巴
好東西記得要收藏哦!!!
給卑微的禿頭哆唻咪點一個like吧~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229221.html
標籤：其他
上一篇：JavaScript基礎——簡介
下一篇：CSS特效二：按鈕影片效果