Home > Developer > JavaScript
<Body>
<Div class = "container demo">
<Div class = "big">
<P class = "instructions"> Big Picture preview </p>
<Div class = "bigframe">
</Div>
</Div>
<Div class = "small">
<P> small image scaling </p>
<Div class = "smallframe">
<Div class = "pre" id = "preview">
</Div>
</Div>
</Div>
</Div>
</Body>
First, let's summarize:
Recently, I have written some small things, all of which are mature JQ or JS on the Internet. However, during the course of practice, I found that many applications, in fact, finally, it is the final result of wide and high variation and location change of elements. The effect or application is formed through events or algorithms.
If you see some amazing effects, you can analyze them in terms of width, height, location, and hiding. Step by step. This is my personal experience. Okay, go to the topic.
How can I synchronize the image information in the selected area on the left with that on the right?
1. synchronization between the display on the right and the left:
Select an area on the left, so the Image Information on the right side is the same as that in this area? The essence is to move the image on the right to make the picture on the right, in the display area, display the image information, just like the selected area on the left.
Ii. How to move the right image
To move an image, that is, to move an element, you can change the top left value. This is an absolute or relative position. But here, no.
Therefore, you can change the value of margin-top margin-left.
Iii. Moving Formula
Medium: Black: image, White: selection area, Red: Start Point, Green: horizontal and vertical coordinate value of the start point; yellow: margin-top, margin-left of the right image
Assume that the image on the left and the image on the right are of the same size, width, and height. To display the image information in the left white area on the right side
Set the margin-top value to the Y coordinate value of the red point.
Set the margin-left value to the X coordinate value of the red point.
That is:
Margin-top = x;
Margin-left = Y;
However, this assumption is not true because the size of the right image changes at any time (in the first analysis );
The change is based on a proportional value.
Therefore, whether the image is zoomed in or out, the original
All values should be multiplied by the zoom-in or zoom-out ratio value:
Margin-top = scaleX * x;
Margin-left = scaleX * Y;
Now we can get the Moving position value. That is to say, the image information can be displayed simultaneously on the left and right.
From Captain op
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
