效果圖：

思路：

當(dāng)鼠標(biāo)在頁面上移動(dòng)時(shí)，動(dòng)態(tài)創(chuàng)建一個(gè)小圓點(diǎn)(位置就是鼠標(biāo)的當(dāng)前位置)。一秒后，再把該圓點(diǎn)刪除掉。僅需要js代碼就能實(shí)現(xiàn)

代碼：

<script>//鼠標(biāo)移動(dòng)時(shí)，動(dòng)態(tài)創(chuàng)建div,一秒后刪除window.onmousemove = function(event){var nDiv = document.createElement('div') //創(chuàng)建新的divvar e = event || window.event //獲取事件對(duì)象//設(shè)置div的樣式(紅色小圓點(diǎn))和位置(鼠標(biāo)當(dāng)前位置)nDiv.style.cssText = "position:absolute; width:5px; height:5px; background-color:red; border-radius:50%" nDiv.style.left = e.pageX + "px"nDiv.style.top = e.pageY + "px"//把創(chuàng)建好的div添加到body里面document.body.appendChild(nDiv)//延遲定時(shí)器實(shí)現(xiàn)一秒后刪除效果setTimeout(function(){nDiv.remove();},1000)}</script>

如有疑問，歡迎下方留言！

總結(jié)

以上是生活随笔為你收集整理的JavaScript动态显示鼠标移动轨迹的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。