backstretch 实现背景自动轮番

这里主要用到的是一款jQuery插件–backstretch,其利用jquery创建一个DIV标签,定位为绝对定位,并且放在最底层,添加图片,并且图片处于动态拉伸状态,所以不会出现图片的没有连续或大小不符合页面的大小出现的空白区域。

backstretch 版本一

backstretch的代码很少,所以直接贴出来。。

<code>
(function(a) {
    a.backstretch = function(k, i, l) {
        function m(c) {
            try {
                f = {
                    left: 0,
                    top: 0
                };
                d = e.width();
                b = d / j;
                if (b >= e.height()) {
                    g = (b - e.height()) / 2;
                    h.centeredY && a.extend(f, {
                        top: "-" + g + "px"
                    })
                } else {
                    b = e.height();
                    d = b * j;
                    g = (d - e.width()) / 2;
                    h.centeredX && a.extend(f, {
                        left: "-" + g + "px"
                    })
                }
                a("#backstretch img").width(d).height(b).css(f)
            } catch(n) {}
            typeof c == "function" && c()
        }
        var h = {
            centeredX: true,
            centeredY: true,
            speed: 0
        },
        e = "onorientationchange" in window ? a(document) : a(window),
        j,
        d,
        b,
        g,
        f;
        i && typeof i == "object" && a.extend(h, i);
        a(document).ready(function() {
            if (k) {
                var c = a("<div />").attr("id", "backstretch").css({
                    left: 0,
                    top: 0,
                    position: "fixed",
                    overflow: "hidden",
                    zIndex: -9999
                }),
                n = a("<img />").css({
                    position: "relative",
                    display: "none"
                }).bind("load",
                function(o) {
                    var p = a(this);
                    j = a(o.target).width() / a(o.target).height();
                    m(function() {
                        p.fadeIn(h.speed,
                        function() {
                            typeof l == "function" && l()
                        })
                    })
                }).appendTo(c);
                a("body").prepend(c);
                n.attr("src", k);
                a(window).resize(m)
            }
        });
        return this
    }
})(jQuery);
</code>

最简单的调用方式为

<code>
$.backstretch("http://xxxxxxx/1.jpg", {speed: 850});
</code>

如果要实现动态背景,比如20秒更换背景,那么用如下代码可以实现。

<code>
//定义一个数组,储存图片路径
    var images = [
        "http://xxxx/images/bg/1.jpg",
        "http://xxxx/images/bg/2.jpg",
        "http://xxxx/images/bg/3.jpg",
        "http://xxxx/4.jpg",
        "http://xxxx/5.jpg"
    ];
///遍历数组 创建一个循环
    $(images).each(function(){
       $('<img/>')[0].src = this; 
    });
    var index = 0;
//调用backstretch函数,并且设定速度为2000毫秒,淡入淡出效果
    $.backstretch(images[index], {speed: 2000});
//创建计时器
    setInterval(function() {
        index = (index >= images.length - 1) ? 0 : index + 1;
        $.backstretch(images[index]);
    }, 20000);
</code>

使用的前提是加载了jQuery库。有兴趣的可以尝试一下如何进一步改造。

backstretch 版本二

<code>
/*! Backstretch - v2.0.3 - 2012-11-30
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2012 Scott Robbin; Licensed MIT */
(function(e,t,n){"use strict";e.fn.backstretch=function(r,s){return(r===n||r.length===0)&&e.error("No images were supplied for Backstretch"),e(t).scrollTop()===0&&t.scrollTo(0,0),this.each(function(){var t=e(this),n=t.data("backstretch");n&&(s=e.extend(n.options,s),n.destroy(!0)),n=new i(this,r,s),t.data("backstretch",n)})},e.backstretch=function(t,n){return e("body").backstretch(t,n).data("backstretch")},e.expr[":"].backstretch=function(t){return e(t).data("backstretch")!==n},e.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5e3,fade:0};var r={wrap:{left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},img:{position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxWidth:"none",zIndex:-999999}},i=function(n,i,o){this.options=e.extend({},e.fn.backstretch.defaults,o||{}),this.images=e.isArray(i)?i:[i],e.each(this.images,function(){e("<img />")[0].src=this}),this.isBody=n===document.body,this.$container=e(n),this.$wrap=e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container),this.$root=this.isBody?s?e(t):e(document):this.$container;if(!this.isBody){var u=this.$container.css("position"),a=this.$container.css("zIndex");this.$container.css({position:u==="static"?"relative":u,zIndex:a==="auto"?0:a,background:"none"}),this.$wrap.css({zIndex:-999998})}this.$wrap.css({position:this.isBody&&s?"fixed":"absolute"}),this.index=0,this.show(this.index),e(t).on("resize.backstretch",e.proxy(this.resize,this)).on("orientationchange.backstretch",e.proxy(function(){this.isBody&&t.pageYOffset===0&&(t.scrollTo(0,1),this.resize())},this))};i.prototype={resize:function(){try{var e={left:0,top:0},n=this.isBody?this.$root.width():this.$root.innerWidth(),r=n,i=this.isBody?t.innerHeight?t.innerHeight:this.$root.height():this.$root.innerHeight(),s=r/this.$img.data("ratio"),o;s>=i?(o=(s-i)/2,this.options.centeredY&&(e.top="-"+o+"px")):(s=i,r=s*this.$img.data("ratio"),o=(r-n)/2,this.options.centeredX&&(e.left="-"+o+"px")),this.$wrap.css({width:n,height:i}).find("img:not(.deleteable)").css({width:r,height:s}).css(e)}catch(u){}return this},show:function(t){if(Math.abs(t)>this.images.length-1)return;this.index=t;var n=this,i=n.$wrap.find("img").addClass("deleteable"),s=e.Event("backstretch.show",{relatedTarget:n.$container[0]});return clearInterval(n.interval),n.$img=e("<img />").css(r.img).bind("load",function(t){var r=this.width||e(t.target).width(),o=this.height||e(t.target).height();e(this).data("ratio",r/o),e(this).fadeIn(n.options.speed||n.options.fade,function(){i.remove(),n.paused||n.cycle(),n.$container.trigger(s,n)}),n.resize()}).appendTo(n.$wrap),n.$img.attr("src",n.images[t]),n},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(this.index===0?this.images.length-1:this.index-1)},pause:function(){return this.paused=!0,this},resume:function(){return this.paused=!1,this.next(),this},cycle:function(){return this.images.length>1&&(clearInterval(this.interval),this.interval=setInterval(e.proxy(function(){this.paused||this.next()},this),this.options.duration)),this},destroy:function(n){e(t).off("resize.backstretch orientationchange.backstretch"),clearInterval(this.interval),n||this.$wrap.remove(),this.$container.removeData("backstretch")}};var s=function(){var e=navigator.userAgent,n=navigator.platform,r=e.match(/AppleWebKit\/([0-9]+)/),i=!!r&&r[1],s=e.match(/Fennec\/([0-9]+)/),o=!!s&&s[1],u=e.match(/Opera Mobi\/([0-9]+)/),a=!!u&&u[1],f=e.match(/MSIE ([0-9]+)/),l=!!f&&f[1];return!((n.indexOf("iPhone")>-1||n.indexOf("iPad")>-1||n.indexOf("iPod")>-1)&&i&&i<534||t.operamini&&{}.toString.call(t.operamini)==="[object OperaMini]"||u&&a<7458||e.indexOf("Android")>-1&&i&&i<533||o&&o<6||"palmGetResource"in t&&i&&i<534||e.indexOf("MeeGo")>-1&&e.indexOf("NokiaBrowser/8.5.0")>-1||l&&l<=6)}()})(jQuery,window);</code>

以上是版本为 v2.0.3的Backstretch,可根据客户端来调整,更先进,使用方法

<code> $.backstretch("http://xxx/garfield-interior.jpg");</code>

若要实现自动轮番,添加

<code>jQuery(document).ready(function ($) {
/*背景*/
    $.backstretch(bgimg, {fade: 3000, duration: 7000});
});</code>

可以调整fade和duration来实现你想要的效果,最后然后配合php代码,并把以下代码放到head头部。

<code>
    var bgimg = [ "http://xxx/0.jpg",
      "http://xxx/1.jpg",
       "http://xxx/2.jpg",
        "http://xxx/3.jpg",
         "http://xxx/4.jpg",
          "http://xxx/5.jpg",
           "http://xxx/6.jpg",
            "http://xxx/7.jpg",
             "http://xxx/8.jpg",
              "http://xxx/9.jpg",
               "http://xxx/10.jpg",
                "http://xxx/11.jpg",
                 "http:/xxx/12.jpg"
      ];
      bgimg.sort(function(){return Math.random()>0.5?-1:1;});
/***代码源自http://winysky.com/,表示感谢~~***/</code>

backstretch 官网上有详细的使用代码,可参考。
仅实现单张图片

<code>/*
 * At its core, Backstretch is a one-line plugin.
 * Just pass in the path to an image, and you're done.
 */
 
  $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
</code>

实现幻灯片效果

<code>/*
 * Here is an example of how to use Backstretch as a slideshow.
 * Just pass in an array of images, and optionally a duration and fade value.
 */
 
  // Duration is the amount of time in between slides,
  // and fade is value that determines how quickly the next image will fade in
  $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});</code>

有两个Click事件,点击后切换

<code>/*
 * You can easily attach Backstretch to jQuery events, like click
 * 
 * Click the buttons above to see the background image change
 */
 
  $("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
  });
 
  $("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/cheers.jpg');
  });</code>

针对一个对象添加

<code>/*
 * If you'd like, you can attach Backstretch to any block-level element. 
 * For example, this demo.
 */
 
  $("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
</code>

2 thoughts on “backstretch 实现背景自动轮番
  1. psy 2014/02/05 16:10  0

    放在header.php吗?
    我现在是单张
    $.backstretch(“http://x.papaapp.com/farm1/a571d2/7153de0e/japan.jpg”, {speed: 150});
    怎么改成轮换啊?

    1. 夜枫's 2014/02/11 20:38 


      Warning: Undefined variable $comment_ID in /www/wwwroot/os_yefengs_com/wp-content/themes/V2EX/functions.php on line 267

      @psyBackstretch – v2.0.3有轮番 功能,使用方法见上面文章。

Comments are closed.

添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。