JS實現(xiàn)超級好看的鼠標小尾巴特效

更新時間：2020年12月01日 14:52:03 作者：我不是禿頭哆唻咪

這篇文章主要給大家介紹了關于JS實現(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ū)）的水平坐標
  x += event.clientX;
  //得到的x加上當事件被觸發(fā)時鼠標指針向對于瀏覽器頁面（或客戶區(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ù)來設置標簽的樣式
 var r = randomNum(1,5);
 switch (r) {
  case 1:
  //設置圖片的路徑,根據(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;
 }
 // 由于要設置動畫，設置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為當前鼠標小尾巴生效的區(qū)域
 var testDiv = document.getElementById("main");
 // 將新建的標簽加到頁面的 body標簽中
 testDiv.appendChild(styleImg);
 // 在文檔中有超出的地方就會不顯示，所以盡量綁定到頁面的div中
 // 設置溢出隱藏，為了防止鼠標在移動的過程中會觸發(fā)上下滾動條
 testDiv.style.overflow = 'hidden';
 //
 	var count = 0;
 	//setInterval() 方法可按照指定的周期（以毫秒計）來調用函數(shù)或計算表達式
 var time = setInterval(function(){
 // 設置定時器 ，讓每一次生成的標簽在指定的周期內修改相應的透明度
 	count += 5;
  styleImg.style.opacity = (100-count)/100 ;
 }, 30)
 // setTimeout() 方法用于在指定的毫秒數(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)其他樣式的小尾巴