Shulou(Shulou.com)06/01 Report--

This "jQuery how to achieve Tmall commodity magnifying glass effect" article most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "jQuery how to achieve Tmall commodity magnifying glass effect" article bar.

Train of thought:

1. It is divided into four parts: the main picture of the product, the small box used for positioning, the enlarged picture, and the small picture of different sides of the product.

2. The small box is positioned on the element of the main drawing of the product, and the enlarged picture is located on the right. When the mouse enters the main drawing of the product, the small box and the enlarged picture are displayed.

3, the enlarged picture element size should be the same as the product main picture size, set the magnification of the main picture size, the small box moves with the mouse, how much the small box offset address, the magnified image offset address should be its negative number, only the picture in the small box area is displayed.

4. Make the small box follow the mouse movement, that is, get the current position of the mouse, calculate the top and left values of the small box, and judge the range so that it does not exceed the size of the elements in the main picture.

5. Get the top and left values of the small box to the enlarged image to show the range of the small box, pay attention! The enlarged picture is several times that of the main picture, the top and left values are also expanded by the corresponding multiple, and the value should be negative, the small box moves to the right, and the enlarged picture should be moved to the left, so as to achieve the effect.

Product page * {margin:0;padding:0;} .product {margin-left:50px;width:400px;}. Product-img {margin:20px auto;text-align:center;} .showimg {position:relative;width:400px;height:400px;border:1px solid # f5f5f5f5;} .show {width:400px;height:400px;} .product-img img {margin:0 3pxtw widthside 60pxtens FFF; FFF;} .showbox {position:absolute;top:0;left:0;opacity:0.5 Cursor:move;width:200px;height:200px;background-color:lightblue;display:none;} .showlarge {position:absolute;overflow:hidden;top:0;left:420px;width:400px;height:400px;border:1px solid # f5f5f5tion displayRod none;} .showlarge img {width:800px;height:800px;position:absolute Event $(".product-img img") .Mouseenter (function () {/ / mouse hovering over small pictures of different products) with a black border and the main image shows it $(".product-img img") .css ({"border": "2px solid # FFF"}); $(this) .css ({"border": "2px solid # 000"})) / / this gets the current mouse-moved element, sets the black border var imgsrc=$ (this) .attr ("src"); / / gets the src attribute value of the current mouse-moved element and assigns it to the main image element $(".show"). Attr ("src", imgsrc); $(".showlarge img"). Attr ("src", imgsrc) / pass the mouse-selected picture to the src attribute of the enlarged drawing element}); / / the enlarged detail picture and small box $(".showimg") .Mouseenter (function () {$(".showbox") .Mouseenter (); $(".showlarge") .show ();}) appear when the mouse is moved into the product master drawing. / / the mouse moves in the product master image event $(".showimg") .mousemove (function (e) {var mousex=e.clientX;// gets the current X coordinate of the mouse for the browser visual area var mousey=e.clientY; var imgx=$ (".showimg"). Offset (). Left;// obtains the offset coordinates of the product master image to the document var imgy=$ (".showimg"). Offset (). Top / / the width value of the small box is the mouse displacement minus the offset coordinates of the product drawing elements minus half of the width of the small box, so that the mouse remains in the middle of the small box (".showbox"). Width () / 2 width () / 2 is used to locate var boxtop=mousey-imgy-$ (".showbox"). Height () / 2 by calculating the distance of the small box to the main drawing elements of the product. / / move the mouse to change the position of the small box $(".showbox"). Css ({"top": boxtop, "left": boxleft}); / / calculate the maximum range of small box movement var maxtop=$ (".showimg"). Height ()-$(".showbox"). Height (); var maxleft=$ (".showimg"). Width ()-$(".showbox"). Width () / / judge the boundary if (boxtopmaxtop) {$(".showbox"). Css ("top", maxtop);} if (boxleftmaxleft) {$(".showbox"). Css ("left", maxleft);} / / set the position offset of the enlarged image, get the offset of the small box multiplied by the magnification, pay attention! The magnification offset should be set to a negative value var showleft=-$ (".showbox"). Position (). Left*2;//position () method returns the position (offset) of the current element relative to the parent element (offset) var showtop=-$ (".showbox") .position () .top*2 / / the previously calculated boxtop and boxleft values should not be used to get the small box offset here, as it may exceed the moving boundary $(".showlarge img") .css ({"left": showleft, "top": showtop});}) The mouseleave event is triggered only when the mouse pointer leaves the selected element, and the mouseout mouse pointer leaving the selected element and any of its child elements are triggered. $(".showimg") .mouseleave (function () {$(".showbox") .Mouseleave (); / / small box hidden $(".showlarge") .hide (); / / enlarged image hiding});})

The effect is as shown in the figure:

The above is about "jQuery how to achieve Tmall commodity magnifying glass effect" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.