<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>div移动</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #00b894;
position: absolute;
cursor: move;
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$(document).mousemove(function(event){
var event = event || window.event;
var pageX = event.pageX || event.clientX + $(this).scrollLeft();
var pageY = event.pageY || event.clientY + $(this).scrollTop();
var targetX = pageX - $("#box").width()/2;
var targetY = pageY - $("#box").height()/2;
$("#box").css({
left:targetX,
top:targetY
});
});
});
</script>
</head>
<body style="width: 2000px;height: 2000px">
<div id="box"></div>
</body>
</html>
- 谷歌
移动成功！！！
- 火狐
移动成功！！！
- IE8浏览器
IE8竟然报了一大堆错误，查阅相关资料发现如果项目需要兼容IE低版本，需要使用jQuery1.x版本，从2.x开始已经不兼容IE6、7、8了。
当前我使用的是jQuery3.4.1版本的，于是我换成的jQuery1.12.4版本
<script src="js/jquery-1.12.4.min.js"></script>
测试：
兼容成功！！！并且火狐，谷歌也是对jQuery兼容的。
我们要记住一个道理，兼容一般都是向下兼容的，既然高版本的兼容，那低版本的也是兼容的。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
在这里，这段代码主要实现的功能是将里面的那个黄色的div随着鼠标的移动而移动。刚开始黄色的div是在左上角的地方，但是随着鼠标的移动到中间的位置。现在我们主要看一下JS代码。
首先获取一个div的对象，var box1 = document.getElementById("box1");，之后我们就要给div添加点鼠标滑动的事件document.onmousemove = function (event)。
我们接着获取鼠标的坐标，通过event。(event = even
在我们使用unity提供的Camera.main.ScreenToWorldPoint这个API的时候，我们不能直接将屏幕鼠标位置转换为世界坐标位置，因为得到的永远是一个固定值（Camera.main的世界坐标）。
//这个div是用来渲染图片的，所以初始是隐藏的而且是悬浮在页面上面的不影响其他展示
div id="img_div" style="display: none;align-self: center;z-index: 5;position:fix
