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

我已经写了一个代码，并且当页面打开时我试图缩小/增大图像。我想自动执行此操作（也许简单的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>

来源

2013-01-02 Ryliatron

你到底在问什么？ – ekstrakt

@ekstrakt如何在页面打开时调整图像大小<< - – Ryliatron

我仍然不明白你所要求的是什么，但是将img的初始宽度和高度设置为110％。 '#photos img {width：110px; width：110％; 身高：110％; ... } – ekstrakt

这是我创建的演示。看看这是功能你是什么trying-

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

来源

2013-01-02 06:23:41 Cdeez

其真棒，非常感谢你**但**为什么它的停止..我们怎么能不停止版本？ – Ryliatron

更新了答案。简单地把动画放在一个函数中，并在最后调用它，以便它进入无限循环。 – Cdeez

非常感谢。 – Ryliatron

如果我理解你的问题正确，你想要的形象大到浏览器窗口的。如果是这样的话，你的代码几乎就在那里。你只需要设置图像的容器也有100％的宽度/高度。

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

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

来源

2013-01-02 05:59:55 Jiskiras

谢谢你的回答，但你不明白我（如果我明白你的答案）查找，其代码和工作时，鼠标悬停图像调整大小％110，我想当页面打开调整大小％110。并再次感谢你。 – Ryliatron

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

回答

相关问题