Bagaimana untuk mencipta kesan mengikut tetikus menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk mencipta kesan mengikut tetikus menggunakan HTML, CSS dan jQuery

王林

Lepaskan： 2023-10-26 12:40:41

asal

1352 orang telah melayarinya

Bagaimana untuk mencipta kesan mengikut tetikus menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan khas mengikut tetikus

Pengenalan
Dalam pembangunan laman web, menambah beberapa kesan khas boleh meningkatkan pengalaman pengguna dan menambah kesan visual tertentu. Kesan khas yang biasa adalah mengikut tetikus, iaitu, semasa pergerakan tetikus, elemen boleh mengikuti dan menukar kedudukan atau gaya mereka dalam masa nyata. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan berikut tetikus yang mudah, dan memberikan contoh kod khusus.

Struktur HTML
Pertama, kita perlu mencipta struktur HTML asas. Memperkenalkan perpustakaan jQuery dan helaian gaya CSS tersuai dalam teg

Dalam teg buat elemen kotak untuk mengikut tetikus dan tambahkan elemen teks sebagai kandungan sampel.

<!DOCTYPE html>
<html>
<head>
    <title>鼠标跟随特效</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="follower"></div>
    <h1>这是一个鼠标跟随的特效</h1>
</body>
</html>

Salin selepas log masuk

Gaya CSS
Seterusnya, tentukan gaya untuk elemen kotak dan elemen teks dalam helaian gaya CSS. Untuk mencapai kesan berikut tetikus, kami akan menggunakan kedudukan mutlak dan JavaScript untuk menukar kedudukan kotak secara dinamik.

#follower {
    position: absolute;
    background-color: red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.5;
}

h1 {
    margin-top: 200px;
    text-align: center;
}

Salin selepas log masuk

Kod jQuery
Akhir sekali, tulis kod jQuery dalam JavaScript untuk melaksanakan kesan berikutan tetikus. Kita perlu mendengar acara pergerakan tetikus dan mengemas kini kedudukan elemen kotak dalam pengendali acara.

$(document).mousemove(function(event) {
    // 获取鼠标的坐标
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    // 将盒子元素的位置设置为鼠标的坐标
    $("#follower").css("left", mouseX + "px");
    $("#follower").css("top", mouseY + "px");
});

Salin selepas log masuk

Kod lengkap
Sepadukan kod HTML, gaya CSS dan kod jQuery di atas Contoh kod lengkap adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>鼠标跟随特效</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
    #follower {
        position: absolute;
        background-color: red;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        opacity: 0.5;
    }

    h1 {
        margin-top: 200px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="follower"></div>
    <h1>这是一个鼠标跟随的特效</h1>

    <script>
    $(document).mousemove(function(event) {
        // 获取鼠标的坐标
        var mouseX = event.pageX;
        var mouseY = event.pageY;

        // 将盒子元素的位置设置为鼠标的坐标
        $("#follower").css("left", mouseX + "px");
        $("#follower").css("top", mouseY + "px");
    });
    </script>
</body>
</html>

Salin selepas log masuk

Ringkasan
Dengan menggunakan HTML, CSS dan jQuery, kami boleh membuat tetikus dengan mudah mengikut kesan khas. Contoh kod yang disediakan di atas boleh membantu anda memahami cara melaksanakan kesan khas ini, dan boleh dilaraskan dan dikembangkan lagi mengikut keperluan anda sendiri. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan mengikut tetikus menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!