jQuery 是一種流行的 JavaScript 庫(kù),可以用來(lái)處理網(wǎng)頁(yè)中的各種交互功能。其中之一就是鼠標(biāo)隨動(dòng)效果,可以使元素跟隨著鼠標(biāo)的移動(dòng)而改變位置。在這篇文章中,我們將利用 jQuery 實(shí)現(xiàn)一個(gè)鼠標(biāo)隨動(dòng)的輪盤效果。
<!-- HTML 代碼 --> <div class="circle"></div>
首先,我們需要在 HTML 中添加一個(gè)圓形的 div 元素。在 CSS 中設(shè)置它的形狀、大小以及樣式,并把它的 position 屬性設(shè)置為 absolute,這樣就可以讓它跟隨著鼠標(biāo)移動(dòng)。
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: #f0f; position: absolute; }
接下來(lái),利用 jQuery 中的鼠標(biāo)移動(dòng)事件,根據(jù)鼠標(biāo)的位置改變圓形元素的 left 和 top 值。由于 left 和 top 值是相對(duì)于父元素的,我們需要通過(guò) event.pageX 和 event.pageY 獲取到鼠標(biāo)相對(duì)于整個(gè)文檔的位置,并減去圓形元素的寬度和高度的一半,以使圓形元素的中心就是鼠標(biāo)的位置。
$('body').mousemove(function(event) { var circle = $('.circle'); circle.css({ 'left': event.pageX - circle.width() / 2 + 'px', 'top': event.pageY - circle.height() / 2 + 'px' }); });
最后,把 jQuery 代碼放在 ready 回調(diào)函數(shù)中,以確保文檔加載完成后再執(zhí)行,從而避免出現(xiàn) undefined 的錯(cuò)誤。
<!-- HTML 代碼 --> <div class="circle"></div> <!-- jQuery 代碼 --> <script> $(function() { $('body').mousemove(function(event) { var circle = $('.circle'); circle.css({ 'left': event.pageX - circle.width() / 2 + 'px', 'top': event.pageY - circle.height() / 2 + 'px' }); }); }); </script>
以上就是利用 jQuery 實(shí)現(xiàn)鼠標(biāo)隨動(dòng)輪盤效果的全部代碼,通過(guò)改變樣式及位置實(shí)現(xiàn)可視化效果。