我们用js来写一个图片跟着鼠标移动的功能
详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#img{
position: absolute;
}
body{
height: 1000px;
width: 1000px;
}
</style>
</head>
<body>
<img id="img" src="这里插入图片地址" alt="">
<script src="common.js"></script>
<script>
var img=document.getElementById("img");
document.onmousemove = function(event){
//解决兼容问题
event = event||window.event;
//获取鼠标的坐标
//client可见窗口坐标
// var X=event.clientX;
// var Y=event.clientY;
//div的偏移量是相对于整个页面的
// var X=event.pageX;//IE8不适用
// var Y=event.pageY;
//火狐等浏览器认为浏览器的滚动条是html的
var st=document.body.scrollTop||document.documentElement.scrollTop;
var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
var X=event.clientX;
var Y=event.clientY;
//设置图片坐标
img.style.left=X+sl+"px";
img.style.top=Y+st+"px";
}
</script>
</body>
</html>