用BACKSTRETCH实现定时自动切换背景

作者:Matrix 被围观: 1,009 次 发布时间:2013-10-09 分类:wordpress建站 兼容并蓄 拷贝型 码字型 零零星星 | 2 条评论 »

NOTICE:这是一个创建于 1159 天前的主题,其中的信息可能已经有所发展或是发生改变。

BACKSTRETCH

jquery-backstretch可以实现之前>>刷新页面后让WordPress背景随机切换  不能到达的动态切换背景功能。 用jquery-backstretch就算你不按F5刷新页面背景也可以自动切换,带有淡入淡出的缓慢加载那种效果,很好看。

github地址:https://github.com/srobbin/jquery-backstretch

官网:http://srobbin.com/jquery-plugins/backstretch/

目前最新版本 Backstretch - v2.0.4 - 2013-06-19

我这使用的是较早的版本1.2.5,没有问题。建议使用官方最新版本。

jq-BACKSTRETCH库下载:

v1.2.5: 2kb左右

http://www.400gb.com/file/28925141

http://pan.baidu.com/share/link?shareid=783264445&uk=3238236832

v2.0.4:5kb左右

http://www.400gb.com/file/28925143

http://pan.baidu.com/share/link?shareid=786083554&uk=3238236832

步骤:

一.在主题header.php的适当位置载入jquery库,1.7.2和1.8.3版本的都可以,其余版本的不清楚。某些主题jquery库已经载入了,不需要重复载入。

google的://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

百度的:http://libs.baidu.com/jquery/1.8.3/jquery.js

二.在主题header.php的适当位置载入BACKSTRETCH的js文件。建议使用官方最新版本v2.0.4

例如:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery.backstretch.min.js"></script>  

说明:<?php bloginfo('stylesheet_directory');?>是当前主题路径。当然jquery.backstretch.min.js需要放到主题内的js目录。

三.header中添加js代码:

  1. <script>  
  2.        var images = [  
  3.            "http://127.0.0.1/wordpress/wp-content/themes/wp_typecho/bg/1.jpg",  
  4.            "http://127.0.0.1/wordpress/wp-content/themes/wp_typecho/bg/2.jpg"  
  5.        ];  
  6.        $(images).each(function(){  
  7.           $('<img/>')[0].src = this;   
  8.        });  
  9.        var index = 0;  
  10.        $.backstretch(images[index], {speed: 3000});//速度默认500ms  
  11.        setInterval(function() {  
  12.            index = (index >= images.length - 1) ? 0 : index + 1;  
  13.            $.backstretch(images[index]);  
  14.        }, 10000); //变换间隔5秒=5000毫秒  
  15.    </script>  

说明:第3、4行的图片路径就是你准备切换图片的地址,可以是相对地址也可以是像上面那样的绝对地址。

第10行的3000为切换图片的过度速度单位毫秒。时间单位1秒=1000毫秒

第14行的10000为图片定时切换的倒计时。这里就是10秒后切换到下一张图片。

四.如果没遇见大问题这样也就可以算成功了。

由于我之前在NGRO主题中添加了>>wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴 的功能。造成上面第三步骤的代码和复制粘贴的js代码冲突,技术有限没办法这个东东,坐等高手。希望都能保留,若实在不行,也就把那flash复制功能丢了。

复制粘贴的js代码:

  1.     <script type="text/javascript">  
  2.         var clip = null;  
  3. function $(id) { return document.getElementById(id); }  
  4. function init() {  
  5. clip = new ZeroClipboard.Client();  
  6. clip.setHandCursor(true);  
  7. clip.setText($('text').value);  
  8. clip.glue('anniu');  
  9. clip.addEventListener( "complete"function(){  
  10.     alert("复制成功!");   
  11. });  
  12. clip.addEventListener( "load"function(client) {  
  13.     client.movie.title="复制本文固定链接";  
  14. });  
  15. }  
  16. </script>  

 

参考:http://support.sartweb.com/?p=1312

 

本文固定链接:http://www.hhtjim.com/with-the-backstretch-implementation-timing-switch-background.html
Matrix
本文章由 Matrix 于2013年10月09日发布在wordpress建站, 兼容并蓄, 拷贝型, 码字型, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:用BACKSTRETCH实现定时自动切换背景-HHTjim'S 部落格
关键字:, ,

有2 条评论 »

  1. xilouqingzhu xilouqingzhu 2013-10-12 11:04:29 +0800#1

    其实不用太频繁,背景每天换下就可以,我想说的是用wordlpress自带的背景功能也可以用这个切换么

    • Matrix Matrix Moderator 2013-10-12 11:09:18 +0800

      这个我不知道 看使用的主题吧

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!