Ⅰ、问题描述:
1、用JavaScript + css实现,图片的鼠标跟随效果;
2、分析:
A、首先要将图片设置成绝对定位,并通过DOM操作来获得图片信息;
B、通过DOM操作来绑定鼠标移动所要触发的事件(即:mousemove);
C、获取鼠标以 page 为参考的坐标系,并通过绝对定位将鼠标放在图片的正中心;
Ⅱ、实现过程如下:
1、运行软件VScode,亲测可实现;
2、运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 设置 body 的高度大小值,以备向下拉伸使用; */
height: 3000px;
}
img {
/* 设置图片为:绝对定位; */
position: absolute;
top: 10px;
}
</style>
</head>
<body>
<img src="./heart.jpeg" width="120" alt=""> <!-- 存放的图片地址; -->
<script>
var pic = document.querySelector('img'); //通过 DOM 操作获取图片信息;
document.addEventListener('mousemove', function(e) {
//通过DOM操作来绑定鼠标移动所要触发的事件;
var x = e.pageX; //获取选择page(以整个网页为参考)的横坐标;
var y = e.pageY; //获取选择page(以整个网页为参考)的纵坐标;
// 给图片设置位置(并将图片的坐标与鼠标点的坐标联系起来;)
pic.style.left = x - pic.width/2 + 'px'; //通过绝对定位将鼠标取到图片的左右正中心;
pic.style.top = y - pic.height/2 + 'px'; //通过绝对定位将鼠标取到图片的上下正中心;
});
</script>
</body>
</html>
3、结果展示:
A、在还没有下拉框的情况下的截图 (右边是下拉框):
B、在已经下拉框的情况下的截图(右边是下拉框):
心形图片的中心仍然是跟随者鼠标来移动的;
4、可能存在的问题:
A 、如果自己也加载了图片信息,仍然不能显示该结果,可以直接下载我传上去的文档(可能解释的更详细),可以直接在 VScode 等其他软件上加载运行;
地址为:
https://download.csdn.net/download/weixin_43405300/19719612?spm=1001.2014.3001.5501
Ⅲ、小结:
哪里有不对或不合适的地方,还请大佬们多多指点和交流!
https://download.csdn.net/download/weixin_43405300/19719612?spm=1001.2014.3001.5501