jquery - jQuery 在不破坏布局的情况下增加图像大小

Question

我有两个用于前后部分的图像列表。我如何使用 jquery 来增加单击的图像的大小而不破坏其他图像的布局。

<div id="concept-reality-wrapper">
    <div class="col-1">

        <h2>Concept</h2>

        <ul>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
        </ul>

    </div>

    <div class="col-2">

        <h2>Reality</h2>

        <ul>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
            <li> <img src="image.jpg" /> </li>
        </ul>

    </div>
</div>

Answer 1

只用 CSS做..你可以在我的画廊看到它是如何完成的：http: //dropthebit.com/demos/photobox/

基本上你只是使用transform:scale()它不会影响任何东西，但会缩放东西。