欢迎光临
我们一直在努力

分享一下开发者技术课,给网页添加动态背景特效

以前文章 最近发现一个插件所以重新更新下本文

插件名称: jquery.backstretch.js

下面是 示例代码:

设置网页背景

  1. <!doctype html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>全屏背景</title>
  6. <script src=“http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js” type=“text/javascript”></script>
  7. </head>
  8. <body>
  9. <script type=“text/javascript”>
  10. $.backstretch(‘http://api.asilu.com/cdn/img/bg/444.jpg’);
  11. </script>
  12. </body>
  13. </html>

运行代码

多张张图片切换

  1. <!doctype html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>全屏背景切换</title>
  6. <script src=“http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js” type=“text/javascript”></script>
  7. </head>
  8. <body>
  9. <script type=“text/javascript”>
  10. $.backstretch([
  11. ‘http://api.asilu.com/cdn/img/bg/444.jpg’,
  12. ‘http://api.asilu.com/cdn/img/bg/445.jpg’,
  13. ‘http://api.asilu.com/cdn/img/bg/446.jpg’,
  14. ‘http://api.asilu.com/cdn/img/bg/447.jpg’,
  15. ‘http://api.asilu.com/cdn/img/bg/448.jpg’
  16. ], {
  17. fade : 1000, // 动画时长
  18. duration : 2000 // 切换延时
  19. });
  20. </script>
  21. </body>
  22. </html>

运行代码

2014-11-14 写的原文

看到别人的网站都有背景 自己也高了一下,但是苦于没有适合的 背景图片,所以就没有添加

现在拿出来共享一下

该代码实现了, 背景图片的切换,带有切换效果的
第一个版本 切换效果用到了 jQuery 的动画,这个版本果断放弃 不需要 jQuery切换动画由CSS设置

具体代码如下
CSS 样式
JS 代码
HTML 就一个 div#bg简单实用

  1. <meta http-equiv=“Content-Type”content=“text/html; charset=UTF-8”/>
  2. <style>
  3. div#bg {
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. height: 100%;
  8. width: 100%;
  9. zindex: 10;
  10. backgroundposition: center 0;
  11. backgroundrepeat: norepeat;
  12. backgroundattachment: fixed;
  13. backgroundsize: cover;
  14. webkitbackgroundsize: cover;
  15. obackgroundsize: cover;
  16. zoom: 1;
  17.  
  18. opacity:1;
  19. transition: opacity 1s linear;
  20. moztransition: opacity 1s linear;
  21. webkittransition: opacity 1s linear;
  22. otransition: opacity 1s linear;
  23. }
  24. </style>
  25. <h1><a href=“http://gouji.org/?post=317”>代码出处</a></h1>
  26. <div id=“bg”></div>
  27. <script>
  28. // 定义图片路径 {num} 为 可变的图片序号
  29. var bgImgUrl = ‘http://api.asilu.com/cdn/img/bg/{num}.jpg’, bgNum,
  30. bgImgArr = [],
  31. bgDiv = document.getElementById(“bg”);
  32. // 组合数组 此处 200 为 图开始序号 结束 210
  33. for (var i=200; i <= 210; i++){
  34. bgImgArr.push(bgImgUrl.replace(‘{num}’, i));
  35. }
  36. setBGimg();
  37. function setBGimg(d){
  38. if(!bgNum || bgNum >= bgImgArr.length) bgNum = 0;
  39. bgDiv.style.opacity = .001;
  40. setTimeout(function(){
  41. bgDiv.style.backgroundImage = ‘url(‘+ bgImgArr[bgNum] +‘)’;
  42. bgNum++;
  43. bgDiv.style.opacity = 1;
  44. }, 1000);
  45. if(typeof d == ‘undefined’)
  46. setInterval(function(){setBGimg(true);}, 6000);
  47. // 上一行的 6000 是背景图片自动切换时间(单位 毫秒)
  48. }
  49. </script>

运行代码

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:资源联盟分享网 » 分享一下开发者技术课,给网页添加动态背景特效

分享到: 更多 (0)
avatar
爱创作与设计

评论 抢沙发

评论前必须登录!

立即登录   注册

资源联盟

唯一官网联系我们
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活