These two days wrote a product Magnifier effect, posted out, Welcome to the guidance.
If you want to see the effect, introduce jquery and change the picture.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html" charset= "GBK"/>
<title> Magnifier </title>
<style type= "Text/css" >
*{margin:0;padding:0;list-style:none;}
. box{width:660px;height:220px;margin:100px Auto;}
. outbox{width:300px;height:200px;position:relative;border:1px solid #000; float:left;}
. OutBox img{position:absolute;left:0;top:0;}
. showbox{width:300px;height:200px;float:left;display:none;position:relative;overflow:hidden;border:1px Solid # 000;}
. Shadow{width:150px;height:100px;opacity:. 5;filter:alpha (opacity =); background: #000000;p osition:absolute; Z-index:9;display:none;float:none;}
. Showbox img{position:absolute;left:0;top:0;}
. Ctrlbox{width:300px;height:200px;position:absolute;left:0;top:0;opacity:0;filter:alpha (opacity = 0); z-index:20; Background: #00CCCC}
</style>
<body>
<div class= "box" >
<div class= "OutBox" >
"
<div class= "Ctrlbox" ></div>
</div>
<div class= "Showbox" ></div>
</div>
<div class= "Shadow" ></div>
<script src= "Js/jquery-1.8.3.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
var bigpic = $ (" ');
var oimg = $ (". OutBox img");
var OBox = $ (". Ctrlbox");
var Vobox = $ (". OutBox");
var SBox = $ (". Showbox");
var Oglayer = $ (". Shadow");
var bimg = null;
var mX = null;
var mY = null;
var OX = Obox.offset (). Left;
var OY = Obox.offset (). Top;
Console.log (OX + "," + OY);
Vobox.hover (function () {
Sbox.show (). append (Bigpic);
Bimg = $ (". Showbox img");
Obox.mousemove (function (e) {
MX = E.clientx-oglayer.width ()/2;
MY = E.clienty-oglayer.height ()/2;
if (Mx<ox) {
MX = OX;
} else if (Mx>ox+obox.width ()-oglayer.width ()) {
MX = Ox+obox.width ()-oglayer.width ();
}
if (My<oy) {
MY = OY;
} else if (My>oy+obox.height ()-oglayer.height ()) {
MY = Oy+obox.height ()-oglayer.height ();
}
Oglayer.css ("Left", (MX) + "px");
Oglayer.css ("Top", (MY) + "px");
Bimg.css ("Left", (OX-MX) * * + "px");
Bimg.css ("Top", (oy-my) * * + "px");
Oglayer.show ();
})
},function () {
Sbox.hide ();
Oglayer.hide ();
})
</script>
</body>
Product Magnifier Effect