以下是Javascript实现跟随鼠标移动的图片的完整攻略:
以下是Javascript实现跟随鼠标移动的图片的完整攻略:
第一步:HTML 模板
首先,我们需要创建一个包含图片的 HTML 模板。可以按照以下示例来创建一个基本 HTML 模板:
<!DOCTYPE html>
<html>
<head>
<title>跟随鼠标移动的图片</title>
</head>
<body>
<div class="container">
<img src="path_to_image" alt="跟随鼠标移动的图片" id="image">
</div>
<script src="path_to_javascript_file"></script>
</body>
</html>
第二步:CSS 样式
接下来,需要使用 CSS 来设置图片的样式以及容器的样式。示例如下:
.container {
position: relative;
width: 500px;
height: 500px;
}
#image {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
这些样式可以使图片在包含器中居中。
第三步:JavaScript 代码
现在,我们将添加 JavaScript 代码,使跟随鼠标移动的图片成为可能。以下是示例代码:
var image = document.getElementById('image');
document.onmousemove = function(event) {
var mouseX = event.clientX;
var mouseY = event.clientY;
image.style.left = mouseX - 50 + 'px';
image.style.top = mouseY - 50 + 'px';
}
这段代码中,首先获取图片的元素,然后使用 document.onmousemove 事件监听器,它会在鼠标移动时触发。然后获取鼠标的 X 和 Y 坐标,并通过设置图片的样式来改变它的位置(使用 mouseX 和 mouseY 减去图片宽度的一半,以使鼠标指向图片的中心)。这样设置之后,图片就会在鼠标移动时跟随鼠标移动。
示例一:蓝色眼睛
下面的代码展示了一组示例。首先,我们将创建一个 HTML 模板,然后添加 CSS 样式和 JavaScript 代码,使图片跟随鼠标移动。这里,我们将使用两个示例,第一个示例是蓝色眼睛。以下是完整的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例 - 跟随鼠标移动的图片</title>
<style>
body {
margin: 0;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 100vh;
}
img {
position: absolute;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>
</head>
<body>
<div class="container">
<img src="https://images.unsplash.com/photo-1521338633546-ae8d1ee1a4f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="跟随鼠标移动的眼睛" id="blue-eye" />
</div>
<script>
var blueEye = document.getElementById('blue-eye');
document.onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
blueEye.style.left = x - 75 + 'px';
blueEye.style.top = y - 75 + 'px';
};
</script>
</body>
</html>
在这里,我们使用了 Unsplash 网站上的一张图片,并设置了以下 CSS 样式:
- body:用于使网页全屏
- .container:居中图片并使它填满整个屏幕
- img:用于设置图片的样式和设置图片默认不被点击
我们还向 JavaScript 代码添加了事件监听器,每当鼠标移动时都调用该代码。在其中,我们获取了蓝色眼睛元素的引用,并将其移动到鼠标的位置。让我们试试!
示例二:紫色薰衣草
接下来,我们来尝试另一个示例:紫色薰衣草。我们将使用同样的 HTML 模板和 CSS 样式,但是我们会更改 JavaScript 代码以使其适应新的示例。以下是完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例 - 跟随鼠标移动的图片</title>
<style>
body {
margin: 0;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 100vh;
}
img {
position: absolute;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>
</head>
<body>
<div class="container">
<img src="https://images.unsplash.com/photo-1524468199101-0240ddb4d015?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="跟随鼠标移动的薰衣草" id="lavender" />
</div>
<script>
var lavender = document.getElementById('lavender');
var x = 0;
var y = 0;
setInterval(function() {
x += (parseInt(Math.random() * 11) - 5);
y += (parseInt(Math.random() * 11) - 5);
lavender.style.left = x + 'px';
lavender.style.top = y + 'px';
}, 100);
</script>
</body>
</html>
在这个示例中,我们还是用了 Unsplash 网站上的一张图片,但更改了以下 JavaScript 代码:
- 首先,我们使用了 setInterval 函数来连续移动图片。
- 在每个 setInterval 周期内,我们随机生成 x 和 y 坐标的增量,然后使用这些增量重新设置图片的位置。
- 由于我们使 x 和 y 的增量随机,因此使图片将按随机位置跟随鼠标移动。
让我们查看结果!
本文标题为:javascript实现跟随鼠标移动的图片
基础教程推荐
- Vue使用NProgress 2023-10-08
- 低代码从0到1创建小程序项目详解流程 2022-08-30
- 基于JavaScript实现仿京东图片轮播效果 2023-12-01
- vuepress 侧边栏自动生成 2023-10-08
- 使用display:none时隐藏DOM元素无法获取实际宽高的解决方法 2022-11-20
- 关于JavaScript对象类型之Array及Object 2023-07-09
- 关于 html:CSS – 调整浏览器窗口大小时修复边 2022-09-21
- 聊一聊Ajax的优缺点 2022-12-15
- 纯html+css实现奥运五环的示例代码 2022-09-21
- 百度UEditor编辑器如何禁止过滤div等网页html标签 2022-11-26