The scaling effect of jQuery photos is not simply zoomed in and out of images, but does not affect the layout of other elements. If you need it, you can refer to the previous special effects on the Internet, but you didn't have a favorite website, as a result, I was not sure how this special effect was implemented. Today, I searched for it on the Internet, and I found it.
I tried to write:
However, only the image is zoomed in, and the layout of elements around the image is also affected (because the image zoomed in occupies a larger space ).
Later, we found that we needed to use the overflow and position attributes flexibly and skillfully to achieve our goal. In fact, I think the overflow and position (top, bottom, left, right) in CSS (CSS3) are simply combinations of webpage special effects without solution. Of course, js (jquery) is the boss.
After talking so much nonsense, you must be confused: What is the special effect? Alas, my language skills are still very general. I will explain it below:
This is the initial form of web page opening:
When you move the mouse over any image of the above six images, the special effect I mentioned will appear (here I place the mouse over 3rd images as an example ):
You will find that the image is reduced, and the mouse clicks the image to zoom in again (back to the initial state), without image overflow, and does not affect the layout of other images and elements.
The following code is pasted:
The Code is as follows:
JQuery photo Scaling Effect
