欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效

 更新時間:2021年12月31日 14:13:08   作者:我不是禿頭sheep  
這篇文章主要為大家介紹了通過JavaScript實(shí)現(xiàn)的一個超級好看的鼠標(biāo)拖尾特效,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)JavaScript有一定的幫助,感興趣的可以學(xué)習(xí)一下

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

全部代碼如下,看注釋可以輕易看懂

<!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>
    //==========鼠標(biāo)星球尾巴JS代碼============

    //========函數(shù):獲取當(dāng)前鼠標(biāo)的坐標(biāo)=========
     function getMousePosition(event) {
         var x = 0;//x坐標(biāo)
         var y = 0;//y坐標(biāo)
         //documentElement 返回一個文檔的文檔元素。
         doc = document.documentElement;
         //body 返回文檔的body元素
         body = document.body;
         //解決兼容性
         if (!event) event = window.event;
         //解決鼠標(biāo)滾輪滾動后與相對坐標(biāo)的差值
         //pageYoffset是Netscape特有
         if (window.pageYoffset) {
             x = window.pageXOffset;
             y = window.pageYOffset;
         } else {//其他瀏覽器鼠標(biāo)滾動
             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加上當(dāng)事件被觸發(fā)時鼠標(biāo)指針向?qū)τ跒g覽器頁面(或客戶區(qū))的水平坐標(biāo)
         x += event.clientX;
         //得到的x加上當(dāng)事件被觸發(fā)時鼠標(biāo)指針向?qū)τ跒g覽器頁面(或客戶區(qū))的垂直坐標(biāo)
         y += event.clientY;
         //返回x和y
         return {'x': x, 'y': y};
     }
     //========函數(shù):獲取當(dāng)前鼠標(biāo)的坐標(biāo)=========

     //=====生成從minNum到maxNum的隨機(jī)數(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的隨機(jī)數(shù)======

    //======給整個文檔綁定一個鼠標(biāo)移動事件======
    document.onmousemove = function(event){

        // 在頁面創(chuàng)建一個標(biāo)簽,(這里是創(chuàng)建一個自定義標(biāo)簽styleImg )
        var styleImg = document.createElement("div");
        //獲取隨機(jī)數(shù)1-5,根據(jù)隨機(jī)數(shù)來設(shè)置標(biāo)簽的樣式
        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è)置標(biāo)簽的初始位置,即鼠標(biāo)的當(dāng)前位置
        var x = getMousePosition(event).x;
        var y = getMousePosition(event).y;
        // 設(shè)置styleImg的坐標(biāo)
    	styleImg.style.top = y +"px";
        styleImg.style.left = x + "px";
        //綁定testDiv為當(dāng)前鼠標(biāo)小尾巴生效的區(qū)域
        var testDiv = document.getElementById("main");
        // 將新建的標(biāo)簽加到頁面的 body標(biāo)簽中
        testDiv.appendChild(styleImg);
        // 在文檔中有超出的地方就會不顯示,所以盡量綁定到頁面的div中
        // 設(shè)置溢出隱藏,為了防止鼠標(biāo)在移動的過程中會觸發(fā)上下滾動條
        testDiv.style.overflow = 'hidden';
        //
    	var count = 0;
    	//setInterval() 方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達(dá)式
        var time = setInterval(function(){
        // 設(shè)置定時器 ,讓每一次生成的標(biāo)簽在指定的周期內(nèi)修改相應(yīng)的透明度
        	count += 5;
            styleImg.style.opacity = (100-count)/100 ;
        }, 30)
        // setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。
        // 設(shè)置延時定時器, 在一定的時間后清除上面的定時器,讓創(chuàng)建的標(biāo)簽不再進(jìn)行變化
        setTimeout(function(){
            // 使用 clearInterval() 來停止執(zhí)行setInterval函數(shù)
            clearInterval(time);
            // 刪除創(chuàng)建的標(biāo)簽
            testDiv.removeChild(styleImg);
        },250)
    }
    </script>
</body>
</html>

ps:以上代碼參考了多篇不同的文獻(xiàn)后自己敲的,沒有面向VC寫博客哦!

最后把圖片素材送給你們吧,只要在上面代碼中做簡單的修改,便可以實(shí)現(xiàn)其他樣式的小尾巴?

到此這篇關(guān)于JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效的文章就介紹到這了,更多相關(guān)JavaScript鼠標(biāo)拖尾特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論