文字根据鼠标位置往相反方向移动,如鼠标在上,文字则向下
时间: 2024-03-01 11:55:06 浏览: 26
这种效果通常称之为“反向滚动效果”,可以通过一些 JavaScript 代码实现。基本思路是根据鼠标位置计算出需要移动的距离,然后通过 CSS transform 属性来实现元素的移动。以下是一个简单的实现示例:
HTML 代码:
```html
<div class="container">
<div class="text">Hello World</div>
</div>
```
CSS 代码:
```css
.container {
position: relative;
height: 200px;
overflow: hidden;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
JavaScript 代码:
```javascript
const container = document.querySelector('.container');
const text = document.querySelector('.text');
container.addEventListener('mousemove', e => {
const x = e.clientX;
const y = e.clientY;
const offsetX = (x - container.offsetWidth / 2) / 5;
const offsetY = (y - container.offsetHeight / 2) / 5;
text.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
});
```
上述代码中,我们监听了容器元素的鼠标移动事件,计算出鼠标相对于容器中心点的偏移量,然后通过 transform 属性将文本元素移动到相应位置。注意,这里将移动距离除以了一个系数 5,可以根据实际需求进行调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)