JS magnifier special effect (compatible Version)

JS magnifier special effect (compatible Version)
Principle 1. when moving the mouse over a small image, capture the position of the mouse over the small image to locate the corresponding position of the large image. page elements: small images, large images, magnifiers 2. technical point: Event capture and positioning 1) onmouseover: it will occur when the mouse pointer moves to the specified object 2) onmouseout: it will occur when the mouse pointer moves out of the specified object 3) onmousemove: it will occur when the mouse pointer moves. 4) Each margin indicates 5) ofgsetLeft and style. left comparison style. left returns a string, for example, 30px. offsetLeft returns 30 styles. left is readable and read-only, and offsetLeft is read-only. Therefore, to change the position of the div, you can only modify the style. left style. the left value must be defined by the event. Otherwise, the obtained value is null. 3. difficulty: Calculate objMark. onmousemove = function (ev) {var _ event = ev | wind Ow. event; // compatible with the event parameter mode of multiple browsers var left = _ event. clientX-objDemo. offsetLeft-objSmallBox. offsetLeft-objFloatBox. offsetWidth/2; var top = _ event. clientY-objDemo. offsetTop-objSmallBox. offsetTop-objFloatBox. offsetHeight/2; // if (left <0) {left = 0;} else if (left> (objMark. offsetWidth-objFloatBox. offsetWidth) {left = objMark. offsetWidth-objFloatBox. offsetWidth;} // If (top <0) {top = 0;} else if (top> (objMark. offsetHeight-objFloatBox. offsetHeight) {top = objMark. offsetHeight-objFloatBox. offsetHeight;} objFloatBox. style. left = left + "px"; // oSmall. the value of offsetLeft is objFloatBox. style. top = top + "px"; var percentX = left/(objMark. offsetWidth-objFloatBox. offsetWidth); var percentY = top/(objMark. offsetHeight-objFloatBox. OffsetHeight); objBigBoxImage. style. left =-percentX * (objBigBoxImage. offsetWidth-objBigBox. offsetWidth) + "px"; objBigBoxImage. style. top =-percentY * (objBigBoxImage. offsetHeight-objBigBox. offsetHeight) + "px" ;}source Code <! Doctype html>