效果图:
思路:
当鼠标在页面上移动时,动态创建一个小圆点(位置就是鼠标的当前位置)。一秒后,再把该圆点删除掉。仅需要js代码就能实现
代码:
<script>
//鼠标移动时,动态创建div,一秒后删除
window.onmousemove = function(event){
var nDiv = document.createElement('div') //创建新的div
var e = event || window.event //获取事件对象
//设置div的样式(红色小圆点)和位置(鼠标当前位置)
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"
//把创建好的div添加到body里面
document.body.appendChild(nDiv)
//延迟定时器实现一秒后删除效果
setTimeout(function(){
nDiv.remove();
},1000)
}
</script>
如有疑问,欢迎下方留言!