js图片跟随鼠标移动

Posted 2020-10-01 不忘初心8090

<div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/>
<img  id="hh"src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/>
</div>

<style>

div{width:500px;height:400px;margin:0 auto;border:1px solid red;position:relative}
img:nth-child(1){position:absolute;left:0;top:0;}
 img:nth-child(2){position:absolute;width:300px;height:200px;display:none;}
</style>

<script>

    document.images[0].onmousemove=function(){
    

    var hh=document.getElementById("hh");
    var x=event.offsetX;
    var y=event.offsetY;
    
        hh.style.display="block";
        hh.style.left=x+50+"px";
        hh.style.top=50+y+"px";
    };
    document.images[0].onmouseout=function(){hh.style.display="none";}
</script>