Preface: the realization of the magnifying glass of taobao that oneself conceived in study process, big guy gush lightly, small white can discuss study together with me. Without further ado, let’s look at the renderings.
The first is HTML structure, structure mainly three pieces, magnifying glass, small image and large image area, we all use div to achieve.
CSS code I will not screenshot, simply say a few need to pay attention to the place on the line, one is the magnifying glass needs to set the transparency, the transparency depends on how much you like. The second is that the background of the larger area needs to be set to twice the size. Of course, not necessarily if twice, but must be larger than its width and height, otherwise cannot achieve the effect of amplification.
Let’s look at the JS code,
Best, if you feel harvest, point a collection and message discussion oh!Copy the code