鼠标特效

admin 62 0

这是一个简单的编程案例,实现了鼠标特效效果。在网页中,当鼠标移动到页面上时,会出现一个跟随鼠标移动的小球特效。

```html

#ball {

width: 20px;

height: 20px;

background-color: red;

border-radius: 50%;

position: absolute;

}

// 获取小球元素

var ball = document.getElementById("ball");

// 监听鼠标移动事件

document.addEventListener("mousemove", function(event) {

// 获取鼠标当前位置

var x = event.clientX;

var y = event.clientY;

// 设置小球的位置为鼠标位置

ball.style.left = x + "px";

ball.style.top = y + "px";

});

```

在上面的代码中,首先定义了一个小球元素,通过CSS样式设置了小球的样式和初始位置。然后使用JavaScript代码获取到小球元素,并监听鼠标移动事件。当鼠标移动时,获取鼠标的当前位置,并将小球的位置设置为鼠标位置,实现了小球跟随鼠标移动的特效。