Recently in the self-study front-end things, feel very magical appearance. Write something small when it's all right. Just wrote yourself a picture of the magnifying glass effect. Please make a lot of suggestions for changes.
Don't talk nonsense, put the code first!
$ (function () {
var w = $ (". Mask img"). Width ()/2; Gets the width and height of the picture.
var h = $ (". Mask img"). Height ()/2;
var mask = $ (". Mask");
Mask.css ({"width": w, "height": h}); Sets the size of the chart div.
Mask.css ("Border", "1px solid #ddd");
$ (". Mask img"). CSS ({"width": w, "height": h}); Sets the width and height of the picture.
$ (". Now"). CSS ({
"width": w/2, "height": h/2, "BackgroundColor": "#DBD09B",
"Position": "Absolute", "top": "0px", "opacity": 0.5, "display": "None"//Mask layer size and style
});
$ (". Supermask"). CSS ({
"width": w, "height": H, "position": "Absolute", "top": "0px",
"BackgroundColor": "#fff", "Border": "1px solid #fff", "cursor": "Move", "opacity": 0//transparent div size and style
})
$ (". Bigimg"). CSS ({
"width": w, "height": H, "position": "Absolute", "top": "0px",
"Left": w+2, "BackgroundColor": "#fff", "Border": "1px solid #ddd", "Display": "None"//the div with large image on the right side
})
$ (". Supermask"). MouseOver (function () {
$ (". Now"). CSS ("Display", "block");
$ (". Bigimg"). CSS ("Display", "block");
})
$ (". Supermask"). Mouseout (function () {
$ (". Now"). CSS ("display", "none");
$ (". Bigimg"). CSS ("display", "none"); Operations on the mask layer and the large graph div.
})
$ (". Supermask"). MouseMove (function () {
var x = EVENT.OFFSETX-W/2/2;
var y = EVENT.OFFSETY-H/2/2;
x = x < 0? 0:x > (W-W/2)? (W-W/2): x;
y = y < 0? 0:y > (H-H/2)? (H-H/2): y;
$ (". Now"). CSS ({"Left": X, "Top": y}); The mask layer follows the mouse movement, and the mouse is in the center point of the matte layer
var srcimg = $ (". Mask img") [0].SRC;
$ (". Bigimg"). CSS ("background-image", "url (" + srcimg + ")");
$ (". Bigimg"). CSS ("Background-positionx", X * (-2));
$ (". Bigimg"). CSS ("Background-positiony", Y * (-2)); The background in the right div shows different picture areas based on the mask layer movement.
})
})
The above is the content of the JS file, just reference this file, and set the corresponding class name on the page, and modify the path of the picture can achieve the effect.
And it calculates the size of the mask layer, the div and the larger div, depending on the size of your picture.
Page code:
<body>
<div style= "position:relative;" >
<div class= "Mask" ></div>
<div class= "Now" ></div>
<div class= "Supermask" ></div>
<div class= "Bigimg" ></div>
</div>
</body>
Style in the JS file has been set, of course, can also be set according to their own needs!
：
In self-study, ask the great gods to make a lot of valuable suggestions.
Jqurey Image Magnifier Plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
