亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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實現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解

    js實現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解

    這篇文章主要介紹了js如何無刷新監(jiān)聽URL的變化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-06-06
  • JS實現(xiàn)簡易留言板（節(jié)點操作）

    JS實現(xiàn)簡易留言板（節(jié)點操作）

    這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易留言板，節(jié)點進行操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • Js日期選擇自動填充到輸入框(界面漂亮兼容火狐)

    Js日期選擇自動填充到輸入框(界面漂亮兼容火狐)

    本文為大家寫了個很漂亮、兼容火狐的Js日期選擇，自動填充到輸入框，代碼如下，有需要的朋友可以參考下
    2013-08-08
  • 微信小程序中如何使用store數(shù)據(jù)共享

    微信小程序中如何使用store數(shù)據(jù)共享

    全局數(shù)據(jù)共享?全局數(shù)據(jù)共享(狀態(tài)管理)是為了解決組件之間數(shù)據(jù)共享的問題，開發(fā)中常用的全局數(shù)據(jù)共享方案有：Vuex、Redux、MobX等，這篇文章主要介紹了微信小程序中如何使用store數(shù)據(jù)共享,需要的朋友可以參考下
    2023-04-04
  • chrome原生方法之數(shù)組

    chrome原生方法之數(shù)組

    由于各瀏覽器的js實現(xiàn)不同，因此各瀏覽器的原生對象（這里不涉及DOM實現(xiàn)，當然這也有區(qū)別）的原生方法也不盡相同，采用原生方法的好處顯而易見，使用兼有效率，而且其中有些方法可能包含在以后的ECMAscript規(guī)范中
    2011-11-11

    • 最新評論