Hi, I’m Steven.

This assembly introduces a function often seen in the mall website, the effect of the picture magnifying glass:

Let’s try to do it with minimal JavaScript, CSS and the simplest HTML structure possible, and here we go.

This video version of the tutorial at www.bilibili.com/video/BV12N… , welcome the attention of three companies!

Part of the HTML

Open the CodePen editor and add a

id image to the HTML section.

Part of CSS

Go to the CSS section and add the #image selector, set the width and height to 300px, and set the background color to black.

Then set the image to be displayed as the background image through background-image. Since we want to make a magnifying glass effect, the size of the image should be larger than the size of the container. For example, the magnifying glass will enlarge the image by 3 times, so the size of the image will be 900px times 900px.

Then background-size, set it back to 300px times 300px, and background-repeat to no-repeat.

Add the Body selector and use Flexbox to center the content up, down, left, and right.

Part of the JavaScript

Ok, so how do I zoom in when I move the cursor over the image? There are three JavaScript events involved. Add three event listeners to the JavaScript section:

  • The first one, yesmouseenterIs triggered when the cursor enters the image. The event handler is namedenterHandler;
  • The second one ismousemoveIs triggered when the cursor moves across the image. The event handler is namedmoveHandler;
  • The third one, yesmouseleaveIs triggered when the cursor leaves the image. The event handler is namedleaveHandler;

Ok, so first deal with the effect of the cursor zooming in on the image and zooming out on the image. This is very simple. The usual method is to add a class when entering the image and remove that class when leaving the image. But I wanted to be a little bit more pure, and try something different this time.

In the enterHandler function, add e.target.setAttribute() to zoomed to 1, which adds the zoomed=”1″ property to

.

Then add e.target.removeAttribute() to the leaveHandler function to remove the Zoomed attribute.

Zoom in and out

Go back to the CSS section and add the #image[zoomed] selector, which means when #image has zoomed property, set backbackground size to 3 times the size and width and height to 900px.

To test this, zoom in on the image and return to the original size when you leave the image:

To handle the cursor move, go back to JavaScript and define two variables in the moveHandler function, x and y. I want to calculate the x and y percentages of the cursor moving onto the image. The displacement numbers can be obtained by offsetX and offsetY, and divided by the width and height of the container.

In order to accurately obtain the container size, then the rect define a variable, assign a value to e. arget. GetBoundingClientRect (), then x is equal to the e.o ffsetX divided by the rect. The width, Y is equal to the e.o ffsetY divided by the rect. Height, and then by e. arget. The style.css. SetProperty respectively to set the x and y variables for CSS, so you can access to the value of x and y in the CSS.

You can now see the CSS variable values using the developer tools:

With these two pieces of data, add one more line of CSS and you have the magnifying glass effect. Can you guess what I would do? If you’re interested, give it a try and come back to it.

Back to the CSS section, add background-position to the #image[zoomed] selector to control the position of the background image:

  • The value of X is set to be zerovar(--x)Multiplied by the100%Put the outer layer oncalc()
  • Y is set to be zerovar(--y)Multiplied by the100%Put the outer layer oncalc()

Test the magnifying glass effect and you are done:

However, we have to take care of the mobile version of the situation, on the phone, the above mouse events are not very applicable. At this point, you need to listen for touch events, which are TouchStart, TouchMove, and TouchEnd. Just can correspond with mouse that three events one by one, first add their event listener.

Then the main thing to adjust is moveHandler, because the Event object for the Touch event doesn’t have offsetX and offsetY, so we need to calculate it ourselves.

Define two variables, offsetX and offsetY, and determine whether E. type is TouchStart, TouchMove, or Touchend.

Set offsetX and offsetY to the corresponding values in the Event object.

In the case of Touch, first of all, touch supports multi-touch. Suppose we touch the screen with a finger, to obtain the first touch point, we can pass E.Touches [0], and then subtract rect.left from.pagex. This is the offsetX value. Using the same principle, calculate the value of offsetY.

Then change the variable offsetX of x to the variable offsetX of Y to the variable offsetY. In the case of mobile phone operation, also add e.preventDefault, so as to avoid triggering the page scroll when the finger slides on the picture.

And finally, a little bit of optimization, when I start pointing down, if I don’t move it, it’s going to zoom in on where X and y were last time, not where I went straight down.

The mouse event doesn’t have this problem, because the cursor has to move to any point in the image, it has to move, it has to trigger the Mousemove, and it’s very easy to correct that, You just need to do moveHandler once in both enterHandler and leaveHandler, and be sure to pass in e.

Let’s look at the completion of this case

Above, is this set to introduce all content.

The source code for this case is at codepen. IO /stevenlei/p…

Your support is my motivation, please pay attention to CodingStartup at least class, we come together!

  • B station: space.bilibili.com/451368848
  • YouTube: youtube.com/codingstart…
  • The Denver nuggets: juejin. Cn/user / 249773…