Home > Developer > Web Develop
There are some times on the website some small actions may attract other people's attention, may increase other people's interest in their website, this is a small example of local amplification. Put it on first, wait until later I am free, add something to turn it into a plugin.
<title></title>
<script src= "Js/jquery-1.8.3.min.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
#bigimg
{
Position:absolute;
Display:none;
Overflow:hidden;
height:200px;
width:200px;
}
#smalldiv
{
Position:absolute;
Display:none;
}
</style>
<script type= "Text/javascript" >
$ (function () {
var count = 0;
$ ("#img"). MouseMove (function (e) {
var Smalldiv = $ ("#smalldiv");
var zoomsizewidth = $ ("#img1"). Width ()/$ ("#img_zoom"). width (); Multiples of wide magnification
var zoomsizeheight = $ ("#img1"). Height ()/$ ("#img_zoom"). Height ();//HLW Large Multiples
$ ("#bigimg"). Show ();
Smalldiv.show ();
var mousex = E.pagex + 5;
var mousey = E.pagey + 5;
if (E.pagex < $ (this). Offset (), left + smalldiv.width ()/2) {//when the x-coordinate of the mouse is less than the x-coordinate of the picture and Div mask layer and is divx=0;
DivX = 0;
}
else if (E.pagex > $ (this). Offset (). Left + smalldiv.width ()/2 && E.pagex < $ (the). Offset (). Left + $ (this) . Width ()-smalldiv.width ()/2) {//The x-coordinate of the mouse is inside the picture and is less than the x-coordinate of the right-hand side of the picture
DivX = E.pagex-$ (this). Offset (). Left-smalldiv.width ()/2;
}
else if (E.pagex > $ (this). Offset (). Width ()-smalldiv.width ()/2) {//The x-coordinate of the mouse is greater than the right-most x-coordinate of the picture (the y-axis is the same)
DivX = $ (this). Width ()-smalldiv.width ();
}
if (E.pagey < $ (this). Offset (). Top + smalldiv.height ()/2) {
Divy = 0;
}
else if (E.pagey > $ (this). Offset (), Top + smalldiv.height ()/2 && E.pagey < $ (this). Offset (). Top + $ (this). Height ()-smalldiv.height ()/2) {
Divy = E.pagey-$ (this). Offset (). Top-smalldiv.height ()/2;
}
else if (E.pagey > $ (this). Offset (). Top-smalldiv.height ()) {
Divy = $ (this). Height ()-smalldiv.height ();
}
$ ("#bigimg"). CSS ("top", Mousey). CSS ("left", MouseX);
Smalldiv.css ("Top", Divy). CSS ("left", DivX);
Smalldiv.appendto ("#img");
var tempx = Smalldiv.offset (). Left-$ (this). Offset (). left;//the effect of zooming in on the position of the large map
var tempy = Smalldiv.offset (). Top-$ (this). Offset (). Top;
Let the picture achieve the left displacement
$ ("#img1"). CSS ("Top",-tempy * zoomsizeheight). CSS ("left",-tempx * zoomsizewidth);
});
$ ("#img_zoom"). MouseLeave (function () {
$ ("#smalldiv"). Hide ();
$ ("#bigimg"). Hide ();
});
})
</script>
<body>
<div id= "img" style= "width:200px; height:200px;margin-left:200px; position:relative; margin-top:30px ">
<div id= "bigimg" ></div>
<div id= "Smalldiv" style= "width:50px; Background-color:rgba (0,0,0,0.5); height:50px; border:1px solid Gray; "></div>
</body>
JS implementation shows the effect of local methods
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
