JQUERY-从左上/右或左下/右更改Div维度 [英] JQUERY - Changing Div Dimension , from top left/right or bottom left/right
问题描述
我正在写我的个人网站，我的容器div中包含4个div(参见图片)
i'm writing my personal website , and i have 4 divs contained in a container div (see the image)
现在点击，我想将单击的div调整为容器的div尺寸
Now on click I wanted to resize the clicked div to the container's div dimension
我做到了.
现在我的问题是有一种方法可以调整大小:
Now my question is there is a way to resize:
- 从右上到左下的第二个
- 第三个从左下到右上
- 从右下到左上的第四个
HTML
CSS
JQUERY
我找到了解决方案，我会尽快发布它:)
I Found a Solution , I will post it soon :)
推荐答案
要执行您想要的动画级别，将需要进行一些改变.当前，您将图像布置为4个<div>元素，彼此相邻并环绕，因为它们的容器宽度会导致这种情况.相反，您需要定位，然后在四个角使用CSS定位.请参见相对定位.
To perform the levels of animation you are looking for will take some change in thinking. Currently, you have your images laid out as 4 <div> elements following each other and wrap because the width of their container would cause such. You would instead need to position then using CSS positioning at the four corners. See relative positioning.
现在，要对项目进行动画处理，您需要知道其最终所需的尺寸和最终所需的端点位置.然后，您将在所需的持续时间内从起始大小和位置开始，为那些最终值设置动画.调整大小将使其最终达到所需的尺寸，但是您还必须以与调整大小比例相同的速率移动图像的位置.例如，当新图标大50％时，其位置应该是从开始到结束的50％.如果我们认为图像的上部/左侧是锚定的位置，则它必须在每个刻度"中移动，以使运动图像的固定角保持在完全相同的位置.
Now, in order to animate the item you wish you would need to know its final desired size and its final desired endpoint position. You would then animate from the starting size and position to those final values over the desired duration. The resizing will make it the final desired size but you will also have to move the position of the image at the same rate as the resize scale. For example, when the new icon is 50% larger, its position should be 50% of the way from the start to the end. If we consider that the upper/left of the image is where the image is anchored then it has to move in each "tick" in such a way that the fixed corner of your moving image stays in exactly the same place.
我意识到这不是为您提供的编码解决方案，但是Stack Exchange的本质比为我编码解决方案"更能回答问题".
I realize that this isn't a coded solution for you but the nature of Stack Exchange is more "answering questions" than it is "code me a solution".
这篇关于JQUERY-从左上/右或左下/右更改Div维度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
