WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › jQuery让背景图片实现滑动效果

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

PCDotFan10年前

 

效果图:

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酷

 

 

#jquery#浮云
9
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (4)
再想想
  • 敖天羽

    这张图被利用了好多次 = =|||

    10年前
    • WP酷

      @敖天羽 啊哈哈那我再来一张~

      10年前
    • 敖天羽

      @WP酷 = =

      10年前
  • 哈哈哈

    你截图的那个主题还有吗?

    6年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
关于WordPress固定链接
10年前
WordPress 短代码制作教程
10年前
完美织梦Dedecms转WordPress方法
9年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1