JavaScript實現酷炫的滑鼠拖尾特效

阿新 • • 發佈：2022-01-04

看完這個保證你有手就行,製作各種好看的小尾巴!

全部程式碼如下,看註釋可以輕易看懂

<!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>
    //==========滑鼠星球尾巴程式碼============

    //========函式:獲取當前滑鼠的座標=========
     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 && VgNZHK 
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,1VgNZHK 
0);
            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:
  http://www.cppcns.com              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(){
        // 設定定時器 ，讓每一次生成的標籤在指定的周http://www.cppcns.com期內修改相應的透明度
        	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寫部落格哦!

最後把圖片素材送給你們吧,只要在上面程式碼中做簡單的修改,便可以實現其他樣式的小尾巴

JavaScript實現酷炫的滑鼠拖尾特效