This is a product zoom-in effect. We used jquery Image zoom-in effect (magnifier Code) to do this. We have previously released a magnifier code using js. Now we use jquery instances.
This is a product zoom-in effect. We used jquery Image zoom-in effect (magnifier Code) to do this. We have previously released a magnifier code using special webpage effects. Now we use jquery instances.
$ (Document). ready (function (){
_ El ("biggerpic "). style. marginleft = (0-(getoffsetnumber (_ el ("biggerpic "). style. width)-getoffsetnumber (_ el ("container "). style. width) + "px ";
_ El ("biggerpic "). style. margintop = (0-(getoffsetnumber (_ el ("biggerpic "). style. height)-getoffsetnumber (_ el ("container "). style. height) + "px ";
$ ("# Oriimage"). bind ('mouseleave ', function (event ){
_ El ("biggerpic "). style. marginleft = (0-(getoffsetnumber (_ el ("biggerpic "). style. width)-getoffsetnumber (_ el ("container "). style. width) + "px ";
_ El ("biggerpic "). style. margintop = (0-(getoffsetnumber (_ el ("biggerpic "). style. height)-getoffsetnumber (_ el ("container "). style. height) + "px ";
});
$ ("# Oriimage"). bind ('mouseo tutorial ver', function (event ){
$ ("# Oriimage"). bind ('mousemove ', function (event) {// The lazybind move event only after the mouse moves to the operation layer
Var mousex, mousey;
If (navigator. useragent. indexof ("msie 6.0")> = 0) {// in ie6 or later versions and in google browsers
Mousey = _ offsety (event, "oriimage ");
Mousex = _ offsetx (event, "oriimage ");
} Else {// append the pixel to the ff browser as the offset unit rather than the other
Mousey = _ offsety (event, "oriimage ");
Mousex = _ offsetx (event, "oriimage ");
}
Var playoffsetx = 0-mousex/_ xpercent (_ el ("oriimage"). style. width, _ el ("biggerpic"). style. width );
Var playoffsety = 0-mousey/_ ypercent (_ el ("oriimage"). style. height, _ el ("biggerpic"). style. height );
// When the x coordinate of a large image is greater than 0, that is, when the leftmost margin is reached, it is reset to 0. When the x offset of the image exceeds the container displayed, then it is reset to its x offset to the negative number between the image and the container.
If (playoffsety <0-(getoffsetnumber (_ el ("biggerpic "). style. height)-getoffsetnumber (_ el ("container "). style. height)-getoffsetnumber (_ el ("container "). style. height)/2
& Playoffsetx> 0-(getoffsetnumber (_ el ("biggerpic"). style. width)-getoffsetnumber (_ el ("container"). style. width ))){
_ El ("biggerpic"). style. marginleft = playoffsetx> 0? 0 + "px ":
Playoffsetx + getoffsetnumber (_ el ("container"). style. width)/2> 0? 0 + "px": playoffsetx + getoffsetnumber (_ el ("container"). style. width)/2 + "px ";
Return;
}
// When the y coordinate of a large image is greater than 0, that is, when the top margin is reached, it is reset to 0. When the y offset of the image exceeds the container displayed, then it is reset to its y offset to the negative number between the image and the container.
If (playoffsetx <0-(getoffsetnumber (_ el ("biggerpic "). style. width)-getoffsetnumber (_ el ("container "). style. width)-getoffsetnumber (_ el ("container "). style. width)/2
& Playoffsety> 0-(getoffsetnumber (_ el ("biggerpic"). style. height)-getoffsetnumber (_ el ("container"). style. height ))){
_ El ("biggerpic"). style. margintop = playoffsety> 0? 0 + "px ":
Playoffsety + getoffsetnumber (_ el ("container"). style. height)/2> 0? 0 + "px": playoffsety + getoffsetnumber (_ el ("container"). style. height)/2 + "px ";
Return;
}
If (playoffsety> = 0-(getoffsetnumber (_ el ("biggerpic "). style. height)-getoffsetnumber (_ el ("container "). style. height)-getoffsetnumber (_ el ("container "). style. height)/2
& Playoffsetx> = 0-(getoffsetnumber (_ el ("biggerpic "). style. width)-getoffsetnumber (_ el ("container "). style. width)-getoffsetnumber (_ el ("container "). style. width)/2 ){
// Alert (0-(getoffsetnumber (_ el ("biggerpic "). style. height)-getoffsetnumber (_ el ("container "). style. height)-getoffsetnumber (_ el ("container "). style. height)/2 );
_ El ("biggerpic"). style. marginleft = playoffsetx> 0? 0 + "px ":
Playoffsetx + getoffsetnumber (_ el ("container"). style. width)/2> 0? 0 + "px": playoffsetx + getoffsetnumber (_ el ("container"). style. width)/2 + "px ";
_ El ("biggerpic"). style. margintop = playoffsety> 0? 0 + "px ":
Playoffsety + getoffsetnumber (_ el ("container"). style. height)/2> 0? 0 + "px": playoffsety + getoffsetnumber (_ el ("container"). style. height)/2 + "px ";
Return;
}
Return;
});
});
});