| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Picture Magnifier Practice </title>
<style type= "Text/css" >
. content {Margin:auto width:800px; border:solid 1px #EAEAEA; position:relative; height:530px;}
h1 {width:800px; Margin:auto text-align:center; padding:20px; font-family: "Microsoft ya Hei"; color: #999;
h3 {width:800px; Margin:auto text-align:center; padding:20px; font-family: "Microsoft ya Hei"; color: #999;
p {width:800px; margin:30px auto auto; Text-align:left color: #999; font:12px/24px "Microsoft Ya Hei"; border:1px dashed #E6E6E6; padding:8px; }
. lxf-large {position:absolute; left:0px; top:0px; height:200px; width:200px;}
. lxf-mover {-moz-border-radius:100px;border:3px solid #FFFFFF; overflow:hidden; height:200px; width:200px; position: absolute; Left: -100px; Top: -100px; Display:none; -webkit-box-shadow: #ccc 2px 4px 5px; -moz-box-shadow: #ccc 2px 4px 5px; }
. lxf-min {height:530px; width:800px;}
</style>
<script src= "Jquery-1.6.4.min.js" type= "Text/javascript" ></script>
<script>
$ (function () {
var m = $ (". Lxf-min"), L = $ (". Lxf-large"), V = $ (". Lxf-mover"), C = $ (". Content"), size = 2.74;
M.hover (
function () {
L.load ("http://www.liuxiaofan.com/demo/magnifier/mbp.html");
V.fadein ();
}
);
C.mousemove (function (e) {
var x = E.pagex-c.offset (). Left;
var y = E.pagey-c.offset (). Top;
V.css ({
Top:y-110,
LEFT:X-110}
);
L.css ({
Left:-(E.pagex-c.offset (). left) *size,
Top:-(E.pagey-c.offset (). Top) *size
});
if (x <-size) | | (X > C.width () + size) | | (Y <-size) | | (Y > C.height () + size) {v.fadeout (' slow ');};
});
});
</script>
<body>
<div class= "Content" >
<div class= "lxf-min" > </div>
<div class= "Lxf-mover" >
<div class= "Lxf-large" ></div>
</div>
</div>
<p> principle: Prepare 2 pictures, original large image and thumbnail image. <br>
When the page is manned, the thumbnail is displayed normally, and then when the mouse passes the thumbnail, Ajax loads the original large image. <br>
The E.pagex method of jquery is used to extract the coordinates of the mouse through the picture, then the coordinate value of the mask's absolute positioning is assigned, and the coordinate value of the large image is changed to achieve the accuracy of the display position. <br>
Hides the mask when the mouse leaves the small plot area. <br>
The effect for Liu Xiaofan Original, reproduced please indicate the source, thank you!
</p>
</body>
|
The effect chart is as follows
Note: jquery file I do not provide download here, you can go to the official website to download a new Baofangco.
