Home > Developer > JavaScript
Jquery implements the shutter effect and jquery implements the blinds.
Today, I tried to use jq to write the shutter effect, that is, the picture passed by the mouse. The picture shows that other pictures are reduced ~
When I first looked at the effect, I thought it was very complicated and thought it was an animation written by the width change. But later I thought that if the width is changed, the image will be distorted when it is narrowed, after learning, I found that the original principle is very simple:
The basic principle is to place all images in the box, locate them separately, and divide the entire box equally, the image will display a cascade effect (in this case, the position is controlled by the left value), and then controlled by jq, when the mouse goes through an image, the image is displayed completely (that is, the left value is changed), and the left value of other images is changed accordingly.
It is difficult to describe the text, first on the html and css layout Effect
<!DOCTYPE html>The layout is very simple. Next, jq controls the changes in the relative positions of each image.
Start position: The left value of the five images has been written in css, which is to divide the width of the entire box equally;
When the mouse goes through: the picture that passes through is completely displayed, that is, occupying the width of 280px (the image width is 280px), the remaining width is (the box width-280px), and the remaining number of images, determine the Ending position of each image based on the obtained value, left value;
I felt like I was talking about the complexity. I first looked at the animation effects of a certain figure with the mouse:
<! DOCTYPE html>The current picture can play happily, And the next point is how the rest of the pictures are moved.
In this case, we can divide the remaining image into the left and right parts and use the ": lt ()" and ": gt ()" methods of jq to write the effect of the remaining parts. There was a small pitfall here, and it had been around for a long time. At last, it was just a reminder from others.
Taking the animation effect on the left side of the current image as an example, I wrote it in the first place.
<! DOCTYPE html>It seems that there are no mistakes. Witness the miracle ~~~ Miracle ~~ Trace ~~~ However, there is no miracle, because the idx in $ ("img: lt (idx)") is no longer a variable, so the current idx value cannot be obtained, we can define a variable outside, connect the lt and idx variables with +, and then introduce the variable.
Therefore, the changes are as follows:
<! DOCTYPE html>In this way, the miracle appears ~~ Similarly, the method on the right is the same.
The final code is as follows:
<! DOCTYPE html>Move the mouse out of the effect, that is, to restore to the initial state, will not be described.
The method may not be the simplest method, but it may not be detailed. I hope you can give me more advice and learn more ~~~
Ps: I don't know how to add images. I will try again later. Welcome to the exchange and learning frontend group 466039913
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
