图片跟着鼠标移动

你离优秀差多少

已于 2022-09-27 11:09:47 修改

阅读量328

点赞数 1

文章标签： javascript 前端 html vue.js

于 2022-09-27 11:06:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45891332/article/details/127067567

版权

<div id="ImgLook">
	<img style="width:100px" />
</div>
<style>
#ImgLook{
  width: 120px;
  border: 1px solid #c1c1c1;
  height: 120px;
  text-align: center;
  position: fixed;
  top:0;
  left:0;
  z-index: 99999;
  display: none;
}
#ImgLook img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate((-50%,-50%));
}
</style>

//一开始就先执行
const LookImg=()=>{
	document.onmousemove=function(event){
      var img=document.querySelector("#ImgLook");
          event=event||window.event;
          var x=event.clientX;
          var y=event.clientY;
          if(img){
            if(img.style.display=="block")
            {
              img.style.top=y+5+"px";
              img.style.left=x+5+"px";
            }
          }
      }
    }
//鼠标移入事件
const cellMouseenter = () => {
	document.getElementById("ImgLook").children[0].src = src
	document.getElementById("ImgLook").style.display="block";
}
//鼠标移出事件
const cellMouseleave = () => {
	var img=document.getElementById("ImgLook");
	if(img){
        img.style.display="none";
    }
};