0

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

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

我的代码：http: //jsfiddle.net/THfCe/

代码：

<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>
4

2 回答 2

1

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

演示（更新）

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，以便动画仅应用于特定图像。

于 2013-01-02T06:23:41.390 回答
0

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

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

具有 100% 宽度/高度的元素只能与其容器一样大。在您的情况下，是 html、body 和 photos 元素。如果您有任何其他容器，则需要将其添加到上面的 CSS 代码中。

于 2013-01-02T05:59:55.253 回答