在网页上移动图像 [英] Move an image across a web page

问题描述

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

How can I move an image element across a page?

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

As an example, Vimeo does this with an image of a cloud: http://www.vimeo.com/log_in

推荐答案

使用以下样式在网页上放置绝对定位的图片：

Place an absolutely-positioned image on your page with a style that looks like:

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

right style属性每50毫秒，所以100毫秒，相同的样式看起来像这样：

Then, using a window timer, increase the right style attribute every 50 milliseconds. So 100 milliseconds in, the same style looks like this:

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

你必须确保云的背景是透明的， 在其后面的东西

You have to make sure the background of the cloud is transparent as well so that it can "float across" stuff that is "behind it"

这里是他们使用的确切图片： http://www.vimeo.com/assets/images/land_cloud.png 你看不到什么，因为它是一个有透明背景的白云。使用浏览器中的另存为下载。

Here's the exact image they use: http://www.vimeo.com/assets/images/land_cloud.png You can't see anything because it's a white cloud with a transparent background. Use "Save As" on your browser to download it.

这篇关于在网页上移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！