相信各位大佬们在购物的时候，在商品详情页，总能看到下面这种效果，当你把鼠标移到图片上，就会出现一个带有透明度的罩罩跟随着你的鼠标移动
想要实现这个跟随鼠标移动的效果，必须要懂得什么是JS的事件；
咱们先看看这个效果，这个带透明度的罩罩只有在鼠标移入图片的时候才会出现，这就涉及到了一个鼠标移入事件（onmouseover）
先写个基本的布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px 500px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
height: 100%;
}
.xianshi {
width: 100px;
height: 100px;
background-color: rgba(240, 110, 77, 0.5);
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
<body>
<div class="box">
<img src="images/big1.jpg" alt="">
<div class="xianshi">
</div>
</div>
</body>
</html>
那个半透明的罩罩咱先让他隐藏起来，再给他加一个鼠标移入让他出现的效果下面是第一步
<script type="text/javascript">
//第一步获取元素，看看咱们要些啥就获取些啥
var box=document.querySelector('.box');//外面的大盒子，咱们后面需要他的地方很多，
//移入移出判断位置都是以他为主的。
var xianshi=document.querySelector(".xianshi");//这是那个罩罩，随便取得名字啦。
//第二步给元素添加事件咯。我们首先要实现鼠标移入罩罩显示的效果
box.onmouseover=function(){ //这里咱们先不获取事件对象，后面慢慢来。
xianshi.style.display="block" //因为设置的默认样式是display=none隐藏了，
//这里给他添加一个display=block让他显示出来。
}
//第三步有了移入显示，自然要有移出隐藏所以再来个鼠标移出事件onmouseout
box.onmouseout=function(){
xianshi.style.display="none" //这里就不解释了，大家都懂了。
}
</script>
第二步呢要让他跟着鼠标走这里就需要用到事件对象event了。什么是事件对象呢，就是只要有事件，就会有一个对象，用来记录事件的各种详细信息。下面就是部分事件对象记录的东西。而我们写拖拽，就需要用到这里面的一些东西来写，比如说鼠标坐标呀。。好吧，好像只需要鼠标坐标。
然后咱们开始写效果吧，不多逼逼，直接上代码咯。先把上面的拿下来加工一下。
<script type="text/javascript">
//第一步获取元素，看看咱们要些啥就获取些啥
var box=document.querySelector('.box');//外面的大盒子，咱们后面需要他的地方很多，
//移入移出判断位置都是以他为主的。
var xianshi=document.querySelector(".xianshi");//这是那个罩罩，随便取得名字啦。
//第二步给元素添加事件咯。我们首先要实现鼠标移入罩罩显示的效果
box.onmouseover=function(){ //这里咱们先不获取事件对象，后面慢慢来。
xianshi.style.display="block" //因为设置的默认样式是display=none隐藏了，
//这里给他添加一个display=block让他显示出来。
//接在这里写，因为你移入的时候就应该触发这个移动事件了，所以直接写在这里面
//移入的时候还要触发移动事件
box.onmousemove=function(e){//这里的e是一个形参，随便你定义个啥，但是大部分人都是定义的e或者event；
var e =e||window.event; //这里是一个事件对象的兼容写法，万恶的ie；
/*
触发鼠标移动事件的时候咱们的事件对象就记录到了我们鼠标的一些信息
clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)
clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离)
offsetX:鼠标点击位置相对于触发事件对象的水平距离
offsetY:鼠标点击位置相对于触发事件对象的垂直距离
pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加 上水平滚动条的距离
pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是clientY加上垂直滚动条的距离
offsetLeft:如果父元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离
offsetTop:如果父元素中没有定位元素，那么就返回相对于body左边缘距离
*/
var x=e.pageX-box.offsetLeft-(xianshi.offsetWidth/2);
//这里为啥用page呢，就怕万一出现滚动条了，好处理一些，如果确认没有滚动条就不用了。
//我们要的坐标应该是鼠标位置-大盒子距离左边的大小
//我这里在减去罩罩的一半是因为这样才能让鼠标在罩罩中间显示
var y=e.pageY-box.offsetTop-(xianshi.offsetHeight/2);
console.log(x,y);//输出一下看看
//这里给他做个限制不能超出了，不然很丑，让他人性化一些。
//
if(x<0){
x=0
//最大是大盒子宽度减去小盒子宽度。高度同理。
}else if(x>box.offsetWidth-xianshi.offsetWidth){
x=box.offsetWidth-xianshi.offsetWidth
}
if(y<0){
y=0
}else if(y>box.offsetHeight-xianshi.offsetHeight){
y=box.offsetHeight-xianshi.offsetHeight
}
//这里把得到的赋值一下。
xianshi.style.left=x+"px"
xianshi.style.top=y+"px"
}
}
//第三步有了移入显示，自然要有移出隐藏所以再来个鼠标移出事件onmouseout
box.onmouseout=function(){
xianshi.style.display="none" //这里就不解释了，大家都懂了。
}
</script>
最后，干净利落的代码放在这了，需要的发挥复制粘贴工程师的特长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px 500px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
height: 100%;
}
.xianshi {
width: 100px;
height: 100px;
background-color: rgba(240, 110, 77, 0.5);
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
<body>
<div class="box">
<img src="images/big1.jpg" alt="">
<div class="xianshi">
</div>
</div>
</body>
<script type="text/javascript">
var box = document.querySelector('.box');
var xianshi = document.querySelector(".xianshi");
box.onmouseover = function () {
xianshi.style.display = "block"
box.onmousemove = function (e) {
var e = e || window.event;
var x = e.pageX - box.offsetLeft - (xianshi.offsetWidth / 2);
var y = e.pageY - box.offsetTop - (xianshi.offsetHeight / 2);
console.log(x, y);
//
if (x < 0) {
x = 0
} else if (x > box.offsetWidth - xianshi.offsetWidth) {
x = box.offsetWidth - xianshi.offsetWidth
}
if (y < 0) {
y = 0
} else if (y > box.offsetHeight - xianshi.offsetHeight) {
y = box.offsetHeight - xianshi.offsetHeight
}
//这里把得到的赋值一下。
xianshi.style.left = x + "px"
xianshi.style.top = y + "px"
}
}
box.onmouseout = function(){
xianshi.style.display = "none"
}
</script>
</html>
好啦，就到这里吧，最后祝大家生活愉快啦。
