这里是生活记录站技术站>>



jQuery(让背景图片滑动起来





嘿嘿,似乎从这静态图片上看不出什么效果么…那么,先献上分流Demo两坨:

Demo1|Demo2

顺便提供围观地址(By Jean-Baptiste Jung):

1.Animated Background Image With JQuery

2.How To Build an Animated Header in jQuery

对英文免疫的同学继续往下看么…

以下为Google翻译+隐残影人工纠正:

————————–翻译开始———————-

如果你已经习惯与jQuery库,毫无疑问,你知道它是多么强大。在本教程中,我们要创建一个基本的网页布局,其中包括一个超级酷的动画背景图片,使用jQuery。

做好准备

在本教程中,我们要创建一个简单的网站布局,其中包括一个非常酷的动画背景。

最终效果已在文章开头展示。

如你所见,在这个例子中我使用了Twitter的背景云彩,这看起来真的不错。

————————–罢工分割线———————-

受不了…这些外国的同学讲得太详细了…咱们长话短说…

1.准备一张背景图片。

本例中用的是Twitter的那张云彩背景图,你也可以自己去另外搞一张。

2.当然是加载JQuery库:


3.html代码

4.CSS代码


5.js代码


看吧…真的一点都不难…







22 Comments.

  1. Kars

    这个效果 要试一下~~

  2. 阿鼎

    回复了好几条,没反应,博主,我是想让我背景动起来,但是我的主题里集成了背景这个功能,该怎么弄才能让他动起来?

  3. 阿鼎

    博主,问个问题,就是我主题集成了添加背景功能,我自己已经添加了背景图,现在该怎么搞?帮忙解决下,谢谢了! :m_37:

  4. blueandhack

    在IE6下~你是怎么处理的呢?

  5. blueandhack

    十分感谢分享~用上了~~嘿嘿~~~ :m_38:

  6. Terry

    好漂亮的效果,可惜我不会加代码

  7. Dianso

    这个效果很酷,我还以为是flash

  8. thinknew

    你发表的评论也太快了吧~呵呵,这个都有判断啊~

  9. Mr.Sam

    这篇文章我喜欢。经典,下次做主题要用上。 :neutral:

  10. 阿修

    你有没有试过给#clouds加个position:absolute?

    • MOPVHS

      @阿修 试过,虽然整体效果不错,但随之而来的是以下问题:
      1.在页面顶部,导航菜单会置顶并在半秒内消失…
      2.那个Twitter和rss的图标是透明的,在蓝色背景的映衬下有锯齿…
      所以…我闪…

  11. 阿修

    你都快成Jquery控了。

Leave a Reply


[ Ctrl + Enter ] 订阅评论Feed