Question

我已经编写了一个代码，我试图在打开页面时缩小/增长图像。我想自动执行此操作（可能是简单的jQuery动画）。

但是我可以让鼠标悬停工作。打开页面时我想要它。

代码：

<style>
    #photos img {
        width: 100%;
        height: 100%;
        transition: width 2s, height 2s, transform 2s;
        margin-left: -10px;
    }
    #photos img:hover {
        width: 110%;
        height:110%;
    }
</style>
<div id="photos">
    <img src="http://www.oprant.com/images/p_slide1.png" alt="Main" id="mainpicture" class="resize" />
</div>

Answer 1

这是我创建的一个演示。看看这是你正在尝试的功能 -

DEMO（已更新）

的jQuery -

$(document).ready(function() {
  repeat();
});

function repeat()
{
$("#myImg").animate({
        left: '50px',
        height: '45px',
        width: '50px'
    }, "slow");
    $("#myImg").animate({
        left: '0px',
        width:'34px',
        height: '37px',
    }, "slow",repeat);
}

更新：为您的图片代码添加ID，以便动画仅应用于特定图片。

Answer 2

如果我正确理解您的问题，您希望图像与浏览器视口一样大。如果是这样的话，你的代码几乎就在那里。您只需要将图像的容器设置为100％宽度/高度。

html, body, #photos { width: 100%; height: 100%; }

100％宽度/高度的元素只能与容器一样大。在您的情况下，HTML，正文和照片元素。如果您有任何其他容器，则需要将其添加到上面的CSS代码中。

打开页面时增大和缩小图像

2 个答案: