快捷導航

javascript實現(xiàn)鼠標拖尾特效

更新時間：2021年09月16日 10:04:29 作者：那年風吹雪正

這篇文章主要為大家詳細介紹了javascript實現(xiàn)鼠標拖尾特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

鼠標特效需要使用定時器setTimeout在固定時間生成節(jié)點，刪除節(jié)點，生成的節(jié)點賦予隨機的寬高，隨機顏色，使每個特效節(jié)點都看起來不一樣

注意：生成的節(jié)點需要設(shè)置絕對定位，使其脫離文檔流，不影響頁面中其他元素的位置

代碼示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠標特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #9df;
            overflow: hidden;
            height: 100vh;
        }
        
        span {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            position: absolute;
            pointer-events: none;
            transform: translate(-50%, -50%);
            box-shadow: 10px 10px 30px #45f, -10px -10px 30px #d80;
            animation: box 5s linear infinite;
            z-index: 3;
        }
        
        @keyframes box {
            0% {
                transform: translate(-50%, -50%);
                opacity: 1;
                filter: hue-rotate(0deg);
            }
            100% {
                transform: translate(-50%, -1000%);
                opacity: 1;
                filter: hue-rotate(720deg);
            }
        }
    </style>
</head>
 
<body>
 
</body>
 
</html>
<script>
    document.addEventListener("mousemove", function(e) {
        var body = document.querySelector("body");
        var span = document.createElement("span");
        var x = e.offsetX
        var y = e.offsetY
        span.style.left = x + "px"
        span.style.top = y + "px";
 
        console.log(x + ">>>" + y)
        var a = Math.random() * 30;
        span.style.width = 30 + a + "px";
        span.style.height = 30 + a + "px";
        body.appendChild(span);
        setTimeout(function() {
            span.remove();
            // console.log("ok")
        }, 4500)
    })
</script>

運行結(jié)果：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS運動特效之鏈式運動分析
這篇文章主要介紹了JS運動特效之鏈式運動,結(jié)合實例形式分析了javascript鏈式運動的原理與具體實現(xiàn)技巧,需要的朋友可以參考下
2018-01-01
js實現(xiàn)圖片查看器
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片查看器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實現(xiàn)
Hash Map通常在JavaScript中作為一個簡單的來存儲鍵值對的地方,不過哈希對象Object并不是一個真正的哈希映射,沒Java中的Hash Map來的那么強大,well,接下來帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實現(xiàn)
2016-05-05
關(guān)于同時使用swiper和echarts遇到的問題及解決方法
這篇文章主要介紹了關(guān)于同時使用swiper和echarts遇到的問題及解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
js獲取內(nèi)聯(lián)樣式的方法
這篇文章主要介紹了js獲取內(nèi)聯(lián)樣式的方法,針對標準瀏覽器與IE瀏覽器進行不同的判斷與獲取,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
基于Bootstrap3表格插件和分頁插件實例詳解
這篇文章主要介紹了基于Bootstrap3表格插件和分頁插件實例詳解的相關(guān)資料,需要的朋友可以參考下
2016-05-05
微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法分析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法,結(jié)合實例形式總結(jié)分析了微信小程序頁面跳轉(zhuǎn)及傳值的常用操作技巧,需要的朋友可以參考下
2017-12-12
JS實現(xiàn)表格隔行變色
這篇文章主要為大家詳細介紹了JS實現(xiàn)表格隔行變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作
這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作,結(jié)合實例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進行遍歷操作相關(guān)技巧與操作注意事項,需要的朋友可以參考下
2019-02-02