Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencipta kesan mengikut tetikus menggunakan HTML, CSS dan jQuery
Bagaimana untuk mencipta kesan mengikut tetikus menggunakan HTML, CSS dan jQuery
- 王林asal
- 2023-10-26 12:40:411452semak imbas
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
<!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>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;
}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");
});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>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!