效果图：

jQuery让背景图片实现滑动效果-WP酷

后面的云是在飘动的哦，此乃浮云也。下面直接接触正题：

首先找个背景，我的背景是从某个主题上扒下来的，添加到主题目录里的images文件夹中

首先加载要加载jquery库了。然后再加载此jquery特效，代码如下：

<script type="text/javascript">// <![CDATA[
  var scrollSpeed = 70;
  var step = 1;
  var current = 0;
  var imageWidth = 2247;
  var headerWidth = 800;

  var restartPosition = -(imageWidth - headerWidth);

  function scrollBg(){
    current -= step;
    if (current == restartPosition){
      current = 0;
    }

    $('#clouds').css("background-position",current+"px 0");
  }

  var init = setInterval("scrollBg()", scrollSpeed);
// ]]></script>

 

接着在主题的style.css里添加一段CSS代码：

#clouds { background:url('images/clouds_header.jpg') repeat-x scroll 0 0 transparent; width:100%; }

之后，在头部的<bod y > 标签之后添加如下代码：

<div id="clouds">

在底部的</ body>标签之前添加：

</div>

 

最后附上一张浮云背景图~~~

jQuery让背景图片实现滑动效果-WP酷