A lot of restrictions on the Internet, the document also ugly understand, and trouble ~ himself wrote a. Laugh
Enlarge the position of the picture = the width or height of the container in which the mouse is located divided by the height and width of the container itself, and find out the percentage of the mouse moving in the container
Two parameters, X and Y, is the position of the larger image, followed by a display container size/2 is to ensure that the picture is displayed in the middle.
<! DOCTYPE html>
<title> Product Information </title>
<style>
html,body,img,a,div{
margin:0px;
padding:0px;
border:0px;
font:12px/150% Arial,verdana, "Song Body";
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;
/*border: #CCC 1px solid;*/
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:1px #CCC solid;*/
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 ();
Calculate percent
var X=event.screenx;
var Y=event.screeny;
x-=$ (this). Offset (). Left;
y=y-$ (this). Offset (). top-65;
Draw a proportion
X= (x/300). toFixed (2);
Y= (y/300). toFixed (2);
250 Container Size/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" >
<!--head information-->
<div class= "Head-box" >
<!--left information-->
<div class= "Head-box-left" >
<!--commodity map-->
<a class= "Goods-max-img" >
</a>
<div class= "Preview-box" >
<div style= "Width:500px;height:500px;overflow:hidden;" >
</div>
</div>
<!--big picture end-->
<!--picture List-->
<div class= "Goods-img-list" >
<a href= "javascript:void ()" class= "Goods-change Change-prev" title= "Previous" ></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= "Next" ></a>
</div>
<!--picture List end-->
</div>
<!--left End-->
<div class= "Head-box-right" ></div>
</div>
<!--header information End-->
<!--main content-->
<div class= "Body-content" >
</div>
<!--main content end-->
</div>
</body>
