制作一个网页js动态特效
时间: 2024-01-15 18:48:00 浏览: 77
好的,我可以提供一个简单的例子,实现鼠标移动时,图片跟随移动的效果。你可以将下面的代码复制到一个 HTML 文件中并打开查看效果:
```
<!DOCTYPE html>
<html>
<head>
<title>JS动态特效</title>
<style>
#container {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
}
#image {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container">
<img id="image" src="https://picsum.photos/500/500" alt="随机图片" />
</div>
<script>
var container = document.getElementById('container');
var image = document.getElementById('image');
container.addEventListener('mousemove', function(event) {
var x = event.clientX - container.offsetLeft;
var y = event.clientY - container.offsetTop;
image.style.transform = 'translate(' + x/5 + 'px, ' + y/5 + 'px)';
});
</script>
</body>
</html>
```
以上代码的实现原理是,通过监听鼠标在容器内的移动事件,计算出鼠标的位置,然后将图片的位置设置为鼠标位置的一部分。其中 `translate()` 方法用于设置元素的位置,参数分别为水平方向和垂直方向的位移量。这里将位移量除以 5 是为了让图片的移动更加平滑。