鼠标移动到图片上放大效果

html:

<img src="" width="100" height="100" style="border-radius: 10px;" onmouseover="divIn(event)" onmouseout="divOut(event)" onmousemove="divIn(event)" />

 <div id="zoom">
     <img id="f" width="340">
 </div>

JS:

 function divIn(event) {
        var img = event.target;
        img.style.cursor = "pointer"
        var zoom = document.getElementById("zoom");
        var zoomImg = document.getElementById("f");
        zoomImg.src = img.src;
        zoom.style.display = "block";
        zoom.style.position = "absolute";
        zoom.style.top = event.clientY - 131 + "px";
        zoom.style.left = event.clientX - 120 + "px";
        zoom.style.zIndex = 3;
    }

function divOut(event) {
        var div = event.target;
        div.style.cursor = null;
        var zoom = document.getElementById("zoom");
        zoom.style.display = "none";
    }

 

转载于:https://my.oschina.net/HazelKm/blog/1835582