Implementation principle
Magnifying glass on the large picture: The display area of the small picture = Large picture size: Small picture size = Large picture offsetLeft: Small picture offsetLeft
Then in the above formula, only the offsetLeft of the large picture is unknown, so the offsetLeft of the large picture = the size of the large picture / the size of the small picture * the offsetLeft of the small picture
Detailed comments in the code
Complete code
Note: After copying to local, replace the image to view the effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
#demo{display:block;width:400px;height:255px;margin:50px;position:relative;border:1px solid#ccc}
#small-box{position:relative;z-index:1}
#float-box{display:none;width:160px;height:120px;position:absolute;background:#ffffcc;border:1px solid#ccc;filter:alpha(opacity=50);opacity:0.5}
#mark{position:absolute;display:block;width:400px;height:255px;background-color:#fff;filter:alpha(opacity=0);opacity:0;z-index:10}
#big-box{display:none;position:absolute;top:0;left:460px;width:400px;height:300px;overflow:hidden;border:1px solid#ccc;z-index:1}
#big-box img{position:absolute;z-index:5}
</style>
</head>
<body>
<div >
<div >
<div ></div>
<div ></div>
<img src="images/"/>
</div>
<div >
<img src="images/"/>
</div>
</div>
<script type="text/javascript">
//Execute multiple function schemes immediately after the page is loaded function addloadEvent(func){
var oldonload=;
if(typeof !="function"){
=func;
}
else{
=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
//Execute multiple function schemes immediately after the page is loaded addloadEvent(b);
function b(){
//Get peripheral container var demo=("demo");
//Get small picture container var s_Box=("small-box");
//Get large picture container var b_Box=("big-box");
//Get large pictures var b_Image=b_Box.getElementsByTagName("img")[0];
//Get magnifying glass var f_Box=("float-box");
//The cover cover on the top is for mouse movement var mark=("mark");
//Move into the magnifying glass and large picture container to display =function(){
f_Box.="block";
b_Box.="block";
}
//Remove out the magnifying glass and large picture container to hide =function(){
f_Box.="none";
b_Box.="none";
}
//Mobile Event =function(ev){
//Get mouse coordinates window compatible ie var e=ev||;
//Current mouse x-axis - container relative body offset - small container relative parent container offset value - half of the width of the magnifying glass = current position of the magnifying glass var left=-s_Box.offsetLeft-f_Box.offsetWidth/2;
//The formula is the same as above var top=-s_Box.offsetTop-f_Box.offsetHeight/2;
//Judge that it is displayed at the edge when the magnifying glass is moved out of the container if(left<0){
left=0;
}else if(left>(s_Box.offsetWidth-f_Box.offsetWidth)){
left=s_Box.offsetWidth-f_Box.offsetWidth;
}
if(top<0){
top=0;
}else if(top>(s_Box.offsetHeight-f_Box.offsetHeight)){
top=s_Box.offsetHeight-f_Box.offsetHeight;
}
//The current position of the magnifying glass f_Box.=left+"px";
f_Box.=top+"px";
//Get the ratio var z=b_Image.offsetWidth/s_Box.offsetWidth;
//Use magnifying glass offset * proportion = offset of large picture, opposite direction so negative value b_Image.=-left*z+"px";
b_Image.=-top*z+"px";
}
}
</script>
</body>
</html>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!