This effect is not difficult. The key point is to set the position and proportion.
Capture mouse position, determine mouse position area, and onmouseover event, onmousemove event, onmouseout event
Set the proportion for displaying the large image. The proportion of the cut image displayed on the small image must be accurate, preferably 2 times or 4 times.
Mainly pay attention to the width. The picture m.jpg I have here is 1440X900....
Copy the code code as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Magnifying glass effect</title>
<style type="text/css">
*{margin:0;padding:0;}
#smallimg{width:360px;float:left;position:relative;border:1px solid red;}
#smallimg img{width:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{width:100px;height:100px;background:#fff;cursor:move;position:absolute;border:1px solid #666;opacity:0.5;filter:alpha(opacity=50);display:none;}
</style>
</head>
<body>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<script type="text/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//Filter image
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = function(){
showimg.style.display = "block";
bigimg.style.display = "inline";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
//The above two variables indicate the area where showimg is allowed to be active.
};
smallimg.onmousemove = function(e){
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var Left = e.clientX - smallimg.offsetLeft - show_half;
//The calculation method for obtaining the currently moved showimg position is the mouse coordinates - the coordinates of the outermost container - the width (height) of the box/2
Top = Top<0?0:Top>maxHeight?maxHeight:Top;
Left = Left<0?0:Left>maxWidth?maxWidth:Left;
showimg.style.top = Top + "px";
showimg.style.left = Left + "px";
bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
smallimg.onmouseout = function(){
showimg.style.display="none";
bigimg.style.background="";
bigimg.style.display="none"
};
</script>
</body>
</html>