Jquery image magnifying glass effect of the train of thought and code of self writing

2020-03-26 21:29:07
OfStack

A lot of restrictions on the Internet, the documentation is difficult to understand, and trouble to write their own. laugh

Algorithm:

The first step:

Position = the width or height of the container in which the mouse is located divided by the height and width of the container itself to find the percentage of the mouse movement in the container

The second part:

After you get the percentage

X =-(x percentage * the width of the picture - shows the width of the container /2);

Y =-(y % * the height of the picture - shows the height of the container /2);

The two parameters, x and y, are where the big picture is, and I've added a container of size /2 to make sure the picture is in the middle.

Effect:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/20131018110512.gif? 20139181163 ">
Code:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title> Commodity information </title> 
</head> 
<style> 

html,body,img,a,div{ 
margin: 0px; 
padding: 0px; 
border: 0px; 
font: 12px/150% Arial,Verdana," Song typeface "; 
color: rgb(102, 102, 102); 
} 

div:after { 
clear: both; 
content: '.'; 
height:0; 
visibility: hidden; 
diplay: block; 
} 

div { 
zoom: 1; 
} 
.main-body{ 
text-align: center; 
padding: 15px; 
} 
.head-box{ 
height: 400px; 
border: #CCC 1px solid; 
} 
.head-box-left{ 
width: 300px; 
height: 390px; 
 
float: left; 
padding: 3px; 
position: relative; 
} 
.head-box-right{ 
width: 500px; 
height: 390px; 
border: #CCC 1px solid; 
float: left; 
margin-left: 10px; 
} 
.goods-max-img{ 
width: 300px; 
height: 300px; 
display:block; 
border: #CCC 1px solid; 
position: relative; 
cursor: move; 
} 
.goods-img-list{ 
width: 300px; 
height: 80px; 

margin-top: 10px; 
} 

.goods-change{ 
display: block; 
float: left; 
width: 17px; 
height: 54px; 
background: url("../web/imgs/goods-change-btn.png"); 
} 
.change-prev{ 
margin-right: 5px; 
margin-left: 2px; 
} 
.change-prev:HOVER{ 
background-position: -34px 0px; 
} 
.change-next{ 
margin-left: 5px; 
background-position: -17px 0px; 
} 
.change-next:HOVER{ 
margin-left: 5px; 
background-position: -51px 0px; 
} 

.goods-img-list-box{ 
width: 250px; 
height: 54px; 
 
border: 0px 1px; 
float: left; 
position: relative; 
overflow: hidden; 
} 
.goods-img-list-box ul{ 
margin: 0px; 
padding: 0px; 
position: absolute; 
top: 1px; 
left: 0px; 
width: 500px; 
} 
.goods-img-list-box ul li{ 
display: block; 
float: left; 
width: 50px; 
height: 50px; 
border: #CCC 1px solid; 
margin-left: 3px; 
} 
.goods-img-list-box ul li a{ 
display: block; 
width: 100%; 
height: 100%; 
text-decoration: none; 
} 
.preview-box{ 
position: absolute; 
top: 0px; 
width: 500px; 
height: 500px; 
background-color: white; 
border: #CCC 1px solid; 
left: 310px; 
display: none; 
overflow: hidden; 
} 

</style> 
<script type="text/javascript"> 

$(function(){ 

$(".goods-max-img").mousemove(function(event){ 
$(".preview-box").show(); 
//Percentage calculation
var x=event.screenX; 
var y=event.screenY; 
x-=$(this).offset().left; 
y=y-$(this).offset().top-65; 
//It is concluded that the proportion
x=(x/300).toFixed(2); 
y=(y/300).toFixed(2); 

//The size of 250 containers is PI over 2
x=-($("#preview-img").width()*x-250); 
y=-($("#preview-img").height()*y-250); 

$("#preview-img").css('top',y+'px'); 
$("#preview-img").css('left',x+'px'); 
document.title=x+","+y; 
}); 

$(".goods-max-img").mouseout(function(){ 
$(".preview-box").hide(); 
}); 

}); 

</script> 
<body> 
<div class="main-body"> 

<!--  Header information  --> 
<div class="head-box"> 

<!--  Information on the left side of the head  --> 
<div class="head-box-left"> 
<!--  A larger product  --> 
<a class="goods-max-img"> 
<img width="100%" height="100%" alt=" In the load ..." src="http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg"> 
</a> 
<div class="preview-box"> 
<div style="width: 500px;height: 500px;overflow: hidden;"> 
<img id="preview-img" style="position: absolute;" alt=" In the load ..." src="http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg"> 
</div> 
</div> 
<!--  A larger end  --> 
<!--  Image list  --> 
<div class="goods-img-list"> 
<a href="javascript:void();" class="goods-change change-prev" title=" On one piece "></a> 
<div class="goods-img-list-box"> 
<ul> 
<li><a href="javascript:void()">8</a></li> 
<li><a href="javascript:void()">7</a></li> 
<li><a href="javascript:void()">6</a></li> 
<li><a href="javascript:void()">5</a></li> 
<li><a href="javascript:void()">3</a></li> 
<li><a href="javascript:void()">3</a></li> 
<li><a href="javascript:void()">2</a></li> 
</ul> 
</div> 
<a href="javascript:void();" class="goods-change change-next" title=" The next "></a> 
</div> 
<!--  End of picture list  --> 
</div> 
<!--  The message ends on the left side of the head  --> 

<div class="head-box-right"></div> 
</div> 
<!--  End of header  --> 

<!--  The main content  --> 
<div class="body-content"> 

</div> 
<!--  End of body content  --> 
</div> 
</body> 
</html>