當頁面打開時增大和縮小圖像

我已經寫了一個代碼，並且當頁面打開時我試圖縮小/增大圖像。我想自動執行此操作（也許簡單的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

當頁面打開時增大和縮小圖像

回答

相關問題