Question

我正在寻找一个脚本，但我不知道该找什么。

我有一个网页，其主体标记带有背景图片。

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

我希望实现的是当页面加载时，它将背景图像显示为991px，然后在设定时间内缓慢减少10px，直到原始大小为91px。

我不确定是否还有这样做，或者甚至是另一种方式，当页面加载时，它会被放大，然后随着时间的推移自动缩小。

基本上，当页面加载时，您会看到图像两次，然后随着时间的推移，您会看到越来越多。

任何人都可以指出我正确的方向。

Answer 1

如果你使用css3使用background-size，那么你可以使用关键帧

不需要javascript。

@-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 ..）

Answer 2

您可以将Javascript用于动画，也可以查看CSS3转换：http://www.pepe-juergens.de/2013/02/css3-transform/

Answer 3

以下是使用JQuery的示例：

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

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

Answer 4

使用vanilla 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

Answer 5

使用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 )

必须计算缩放和间隔

在一定时间内自动减小图像尺寸

5 个答案: