<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 map zoom </p>
<div class= "Smallframe" >
<div class= "pre" id= "Preview" >
</div>
</div>
</div>
</div>
</body>
Let's summarize:
Recently practicing, wrote some small things, are online already have mature jq or JS, but in the process of practicing, I found that many applications, in fact, the last, are the elements of the wide and high change, position change, through the event or algorithm, finally formed the effect or application.
If you see some very cool things effect, in fact, can go to the width of the height, position, show hidden, these aspects to analyze. One step at a depth. is a little personal experience. All right, let's get to the point.
How do i show the image information of the left selection area and the sync on the right?
One, right and left sync:
Select an area on the left side, so the image information on the right side is the same as the area. The essence, that is, to move the image to the right, so that the right side of the picture, in the display area, the image information displayed, exactly the same as the selection area on the left.
Second, how to move the right image
To move a picture, that is, to move an element, you can change the top left value, in the case of absolute or relative positioning. And here, No.
So use the way to change the Margin-top margin-left value.
Three, move the formula
Above: Black: Picture, White: Selection, Red: Starting point, green: the horizontal ordinate value of the starting point; Yellow: Margin-top,margin-left of the right picture
Suppose: The picture on the left and the right picture are the same size, width and height. I want to display on the right side of the white area of the image information, you need to put the right picture
The Margin-top value is set to: the y-coordinate value of the red dot
The Margin-left value is set to: the X coordinate value of the red dot
That
Margin-top = x; Margin-left = Y;
But now the assumption is not tenable, because the size of the right picture, is always changing (in the first analysis);
And the change is based on a proportional value.
So here, whether the picture is enlarged or shrunk, the original
Should be multiplied by this magnified or reduced proportional value:
Margin-top = scalex*x; Margin-left = Scalex*y;
OK, now you can get the location value of the move. That is to say, the left and right can display the image information synchronously.
The above is the entire content of this article, I hope to help you, interested friends can see the "use of jquery plug-in imgareaselect to achieve picture upload cut (zoom)", thank you for the support of cloud habitat community!
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
