Question

如何在页面上移动图像元素？

例如，Vimeo使用云图像http://www.vimeo.com/log_in

执行此操作

Answer 1

他们只是用JavaScript改变了位置。

您可以使用jQuery .animate()轻松自行完成此操作。

Answer 2

在页面上放置一个绝对定位的图像，其样式如下：

style="position: fixed; top: 40%; right: 0px;

然后，使用窗口计时器，每50毫秒增加right样式属性。所以100毫秒，相同的风格看起来像这样：

style="position: fixed; top: 40%; right: 2px;

你必须确保云的背景也是透明的，以便它可以“漂浮”“背后”的东西

以下是他们使用的确切图像：http://www.vimeo.com/assets/images/land_cloud.png您看不到任何东西，因为它是一个透明背景的白色云。使用浏览器中的“另存为”进行下载。

Answer 3

代码：

function cloud () { 
  var cloud = new Element('img', {
    'src':'/assets/images/land_cloud.png',
    'styles': {
      'position':'fixed',
      'top':'40%',
      'right':'40px'
    }
  }).inject(document.body);

  var cloud_style = (function () {
    var right = this.getStyle('right');
    right = right.substr(0,right.indexOf('px'));
    this.setStyle('right', right.toInt()+1+'px');
  });

  cloud_style.periodical('100',cloud);
}

Answer 4

你可以用css3动画做到这一点。或者你可以用普通的'Javascript：

来做到这一点

使用适当的间隔值调用SetInterval（）;然后，在interval-timeout处理程序中，更改云图像的x-origin以向左或向右移动。设置云和山的z-index，使云隐藏在山上。

在网页上移动图像

4 个答案: