本文介绍了一个简单的HTML和JavaScript实现的鼠标跟随图片效果。通过监听鼠标移动事件，动态调整页面上图片的位置，使其始终跟随鼠标光标。这适用于前端开发者学习基本的DOM操作和事件处理。
注：图片需用本机保存图片 需自己添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{width: 50px;height: 50px;position: absolute;border-radius: 50%;}
</style>
</head>
<body>
<script type="text/javascript">
var oImg=createImg();
document.onmousemove=function (e) {
//console.log('move');
e=e||window.event;
//获取鼠标的位置
var x=e.clientX;
var y=e.clientY;
oImg.style.left=x+15+'px';
oImg.style.top=y+15+'px';
document.body.appendChild(oImg);
}
function createImg(){
var img=document.createElement('img');//创建图片节点
img.src='images/1.jpg';//添加图片
return img;//返回img
}
</script>
</body>
</html>
扫一扫
877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
