js鼠标触碰·图标位置随机切换
时间: 2023-10-23 09:08:44 浏览: 46
你可以使用JavaScript来实现鼠标触碰图标位置随机切换的效果。以下是一个简单的实现方法:
1. 首先,在HTML中创建图标元素。例如,使用一个div元素来表示图标:
```html
<div class="icon"></div>
```
2. 使用CSS设置图标的样式,并将其位置设置为随机的:
```css
.icon {
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon:hover {
cursor: pointer;
}
```
在这个例子中,图标的位置被设置为页面中心,但是你可以使用JavaScript来随机生成位置。
3. 在JavaScript中,使用querySelector方法获取图标元素,并添加一个鼠标触碰事件监听器:
```javascript
const icon = document.querySelector('.icon');
icon.addEventListener('mouseover', () => {
// 在这里添加图标位置随机切换的代码
});
```
4. 在鼠标触碰事件监听器中,使用JavaScript来生成随机位置,并将图标的left和top样式属性设置为这些值:
```javascript
icon.addEventListener('mouseover', () => {
// 生成随机位置
const randomX = Math.floor(Math.random() * window.innerWidth);
const randomY = Math.floor(Math.random() * window.innerHeight);
// 设置图标位置
icon.style.left = `${randomX}px`;
icon.style.top = `${randomY}px`;
});
```
这样,当用户触碰图标时,它就会在页面上随机移动到一个新位置。