在一定的時間內自動縮小圖像大小

我有一個帶有背景圖片的身體標記的網頁。

body { 
background: url(eye.gif)repeat; 
background-size:91px 91px; 
}

什麼，我希望能做到的，是在頁面加載時它顯示的背景圖片爲991px，然後慢慢地10px的在設定的時間減少直到91px的原始大小。

我不確定是否有離開這樣做，或甚至另一種方式，當頁面加載時，它是放大，然後自動縮小一段時間。

基本上，當頁面加載時，你會看到圖像兩次，然後隨着時間的推移，你會看到越來越多。

任何人都可以指向正確的方向。

來源

2013-12-09 mally

我點您在JavaScript [setInterval的]的方向（http://www.w3schools.com /jsref/met_win_setinterval.asp）函數和jquery [css]（http://api.jquery.com/css/）函數。 – TreeTree

使用計時器更改CSS類，每個類都有不同的維度。 –

下面是使用JQuery一個樣本：

http://jsfiddle.net/frUvf/16/

$(document).ready(function(){ 
    $('body').animate({'background-size':'10000px'}, 50000); 
})

來源

2013-12-09 15:36:44

你的小提琴和答案不匹配 –

修正了它。我複製了錯誤的鏈接。 –

您可以使用JavaScript的動畫或可以看看CSS3轉換：如果您使用CSS3使用的背景大小，所以你可以使用關鍵幀

沒有所需的JavaScript http://www.pepe-juergens.de/2013/02/css3-transform/

來源

2013-12-09 15:25:21 PKeidel

我會使用jQuery來支持舊瀏覽器 –

或強制人們使用一個實際的瀏覽器;） – PKeidel

jquery = lag。特別是在移動設備上 – cocco

。

@-webkit-keyframes bganimation{ 
0%{background-size:991px 991px;} 
100%{background-size:91px 91px;} 
} 

body{ 
background: url(eye.gif)repeat; 
background-size:91px 91px; 
-webkit-animation:bganimation 20s linear; // 20s = 20 seconds 
}

更多的支持，你需要添加其他特定的前綴（-moz，-ms ..）

來源

2013-12-09 15:25:29 cocco

你是對的，我不介意添加CSS2和jQuery編輯到這個。 –

使用香草JS：

var lowerBound = 250, 
    step = 10, 
    duration = 1000, 
    image = document.getElementById('image'); 

(function resizer() { 
    if (image.clientWidth > lowerBound) { 
    image.style.width = image.clientWidth - step + 'px'; 
    var timer = setTimeout(resizer, duration); 
    } else { 
    clearTimeout(timer); 
    } 
}());

只需將lowerBound/step/duration變量更改爲您需要的任何變量即可。

Fiddle

來源

2013-12-09 15:37:16 Andy

與jquery：

var body = $('body'); 
var zoom = 2; 
var interval_zoom = 0.5; 
var time_interval = 90000; 

    setInterval(function(){ 
    body.css("zoom", zoom); 
    zoom = zoom - interval_zoom; 
    if(zoom<=1) 
     clearTimeout(this); 


    }, time_interval)

縮放和間隔必須計算

來源

2013-12-09 15:39:08 Sadako

在一定的時間內自動縮小圖像大小

回答

相關問題