【问题标题】:How to fill browser window with rotating background Image?如何用旋转的背景图像填充浏览器窗口?
【发布时间】:2011-03-30 22:30:48
【问题描述】:

我试图弄清楚如何用背景图像填充浏览器窗口,并在用户调整浏览器窗口屏幕时调整图像比例。

另外,我想让背景图像在 3 到 5 个不同的图像之间旋转。

我所追求的一个例子可以在这里看到:

http://elegantthemes.com/preview/InStyle/

【问题讨论】:

  • 我没有使用 wordpress,因此我无法使用主题。我不想创建具有相同效果的自己的网站。除非我误解了你在说什么?

标签: javascript jquery html css background


【解决方案1】:

改变背景的概念很简单。这是一个简单的例子,我通过改变身体类别来改变背景。

var bg = ['img3', 'img1', 'img2'];
$.each(bg, function(index, ui) {
    setTimeout(function() {
        $('body').removeAttr('class').addClass(ui);
    }, 2000 * index)
});

http://jsfiddle.net/ewsQ7/查看工作示例

【讨论】:

  • 我将如何使用上面的代码获得“淡化”效果?
  • 嗯.... 理想情况下,我想复制这些家伙在上面的示例站点所做的事情。您的解决方案非常接近,除了它会立即发出嗖嗖声而不是淡入淡出过渡.....嗯
【解决方案2】:

他们正在使用 jquery 在图像和文本之间进行交叉淡入淡出。查看第 27 行

http://elegantthemes.com/preview/InStyle/wp-content/themes/InStyle/js/custom.js

我不会为此剪切和粘贴 js 代码,因为它是 wordpress 的付费主题。如果您不想自己编写所有内容,我建议您购买该主题,因为它完全符合您的要求。

http://www.wpthemesnews.com/theme-releases/instyle-a-premium-wp-theme-from-elegantthemes/

【讨论】:

  • 谢谢。我有点(或很多菜鸟),所以请和我一起裸露。我没有使用 wordpress,因此我可以购买主题并使用它(或者如果我仍然可以使用它,尽管不使用 wordpress,我会很乐意购买并使用它)。那么有没有办法获得相同的效果,(即用图像填充背景,然后循环播放?)
猜你喜欢
  • 1970-01-01
  • 2010-10-17
  • 2014-03-30
  • 2011-08-04
  • 2013-10-27
  • 1970-01-01
  • 2011-10-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多