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

执行with CSS only ..您可以在我的图库中看到它是如何完成的： http://dropthebit.com/demos/photobox/

基本上你只是使用transform:scale()而且除了缩放之外没有任何影响。

jQuery在不中断布局的情况下增加图像大小

1 个答案: