HTML5自定义元素播放焦点图动画

本文由码农网– 小峰原创，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！

这是一款基于HTML5的焦点图动画，它和其他焦点图不同的地方在于，它播放的不仅仅是图片，而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。

在线演示源码下载

HTML代码

<div class="parallax-bg" id="slider-wrap"><div class="slider parallax-bg" id="slider">           <div class="slider-sections sandbox"> <section class="first">                     <img alt="Kendo UI" src="images/home-banner-1.png"/>                     <div class="text">                          <h2>SmartSite Ver 2.2<br />智能网站管理系统 </h2>                          <p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p>                          <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>                     </div>                </section><section>                     <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />                     <div class="text" style="padding-top: 10px;">                          <h2>企业网站管理系统</h2>                          <p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城，在线支付、配送、支付方式管理、广告等模块。</p>                          <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>                     </div>                </section><section>                     <img src="images/home_banner_web-q2.png" alt="Kendo UI" />                     <div class="text">                          <h2>智能移动网站管理系统</h2>                          <p class="copy">基于jquery.Mobile、HTML5技术框架，前后台完全分离，采用标签加模板技术，全站生成纯静态页。</p>                          <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>                     </div>                </section>           </div>      </div>      <a class="slider-prev" href="javascript: void(0)">?</a> <a class="slider-next" href="javascript: void(0)">?</a></div>

CSS代码：

这里列出的是这个焦点图相关的核心CSS代码。

.slider section {display: none;}.slider section.first {display: block;}.slider-sections, .slider-sections section {width: 861px; height: 335px;}.slider-sections {margin: 0 auto; position: relative;}.slider-sections section {position: absolute; top: 0; left: 0px; }.header-content h2 {font:400 32px/1.2 "microsoft yahei", Tahoma, arial, sans-serif;color: #fff;margin: 0 0 26px;}.header-content p {    margin: 0 0 30px;}.header-content .centered-content{padding-top: 30px;padding-bottom: 10px;}.button {float: left;width: auto !important;list-style: none;}.button a,.button button,.button input { /* Standard black button */  font-size: 15px;  /*font-family: 'lucida sans',arial,helvetica,sans-serif;*/  line-height: 18px;color: #fff !important;  text-decoration: none;  padding: 5px 14px 6px 13px;display: block;width: auto;position: relative;z-index: 2;    border: none;        -moz-border-radius: 3px;border-radius: 3px;cursor: pointer;background: #313131; /* Old browsers */background: -moz-linear-gradient(top, #313131 0%, #222222 100%); /* FF3.6+ */background: -webkit-linear-gradient(top, #313131 0%,#222222 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #313131 0%,#222222 100%); /* Opera11.10+ */background: -ms-linear-gradient(top, #313131 0%,#222222 100%); /* IE10+ */background: linear-gradient(top, #313131 0%,#222222 100%); /* W3C */-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}.button a:hover,.button input:hover,.button button:hover,.button a:focus,.button input:focus,.button button:focus{  background: #464646; /* Old browsers */background: -moz-linear-gradient(top, #464646 0%, #393939 100%); /* FF3.6+ */background: -webkit-linear-gradient(top, #464646 0%,#393939 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #464646 0%,#393939 100%); /* Opera11.10+ */background: -ms-linear-gradient(top, #464646 0%,#393939 100%); /* IE10+ */background: linear-gradient(top, #464646 0%,#393939 100%); /* W3C */    }header .header-content .button a,#content .button a:hover{    text-decoration: none;    }.header-content .beta-ribbons {    position: absolute;     height: 120px;    width: 85px;    text-indent: -200px;    overflow: hidden;    background: url(../images/kendo-ribbons.png) no-repeat 0 0;}.header-content .beta-ribbons.ribbon-1 {    background-position: -170px 0;    top: -3px;    right: -145px;}.header-content p.copy .beta-ribbons.ribbon-1 {    top: -135px;    left: 900px;}.header-content .beta-ribbons.ribbon-4 {    background-position: -255px 0;    left: -62px;    top: -30px;    z-index: 10;text-indent: -2000px;}

JavaScript代码：

下面是这个焦点图插件的代码。

/*** @author Alexander Farkas* v. 1.22*/(function ($){    if (!document.defaultView || !document.defaultView.getComputedStyle)    { // IE6-IE8        var oldCurCSS = $.curCSS;        $.curCSS = function (elem, name, force)        {            if (name === 'background-position')            {                name = 'backgroundPosition';            }            if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name])            {                return oldCurCSS.apply(this, arguments);            }            var style = elem.style;            if (!force && style && style[name])            {                return style[name];            }            return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);        };    }    var oldAnim = $.fn.animate;    $.fn.animate = function (prop)    {        if ('background-position' in prop)        {            prop.backgroundPosition = prop['background-position'];            delete prop['background-position'];        }        if ('backgroundPosition' in prop)        {            prop.backgroundPosition = '(' + prop.backgroundPosition;        }        return oldAnim.apply(this, arguments);    };    function toArray(strg)    {        strg = strg.replace(/left|top/g, '0px');        strg = strg.replace(/right|bottom/g, '100%');        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);        return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]];    }    $.fx.step.backgroundPosition = function (fx)    {        if (!fx.bgPosReady)        {            var start = $.curCSS(fx.elem, 'backgroundPosition');            if (!start)            {//FF2 no inline-style fallback                start = '0px 0px';            }            start = toArray(start);            fx.start = [start[0], start[2]];            var end = toArray(fx.end);            fx.end = [end[0], end[2]];            fx.unit = [end[1], end[3]];            fx.bgPosReady = true;        }        //return;        var nowPosX = [];        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];    };})(jQuery);/*tlrkSlider  example usage:    $("#slider").tlrkSlider({      autoStart: false,      elements: {        "img": {delay: 10},        "h2": {delay: 500},        ".copy": {delay: 800},        ".button": {delay: 1000}      }    });  to go to a specific frame:    $("#slider").tlrkSlider("go", position);    "position" can have one of the following values:    "next", "prev", "first", "last", "+1", "-1" or a numeric value  to start/stop the automatic loop:    $("#slider").tlrkSlider("start");    $("#slider").tlrkSlider("stop");  to change the delay between automatic transitions:    $("#slider").tlrkSlider("option", "delayAnimation", 1000);  to change any option:    $("#slider").tlrkSlider("option", option_name, option_value);  Changing the "elements" object is not tested.  Changing the following options: "navigation", "navigationClass", "framesSelector", "autoStart" won't have any effect for now.  They are used only during the initialization.  $("#slider").data("tlrkSlider") will return the plugin instance and the methods/properties can be accessed from there.  The plugin contructor defaults are accessable through TlrkSlider.defaults  The function that actually sweep the elements in/out can be overriden from    TlrkSlider.prototype._animationIn and TlrkSlider.prototype._animationOut    See sweepIn/sweepOut  */;(function( $, window, document, undefined ){  // utility function that generates the "dots" navigation  function generateNavigation($el, count, config) {    var i, html = "",        width = count * 24;    html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>";    for (i = 0; i < count; i++) {      html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>";    }    html += "</ol>";    $el.append(html);  }  function sweepOut($el, windowWidth) {    var dfr = $.Deferred(),        pos = $el.position(),        width = $el.width(),        delta, final,        options = $el.data("tlrkAnimOptions");    windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it    delta = windowWidth - pos.left;    final = -(delta);    setTimeout(function(){      $el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){        dfr.resolve();      });    }, options.delay);    return dfr.promise();  }  function sweepIn($el, windowWidth, frameLeft) {    var dfr = $.Deferred(),        options = $el.data("tlrkAnimOptions"),        positionData = $el.data("tlrkOriginalPos"),        final = positionData.position.left,        rightEdge;    windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it    $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen    $el.css("left", function(current){      return current + windowWidth - frameLeft;    });    setTimeout(function(){      $el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){        dfr.resolve();      });    }, options.delay);    return dfr.promise();  }  // two pass function that first iterates all the elements and gets their position/width/height  // and then sets their position to absolute  function absolutize($elements) {    // todo - move it to separate function and do it just once    // gather the original position/dimension data for all elements    $elements.each(function(){      var $t = $(this);      if ($t.data("tlrkOriginalPos")) return      $t.data("tlrkOriginalPos", {        position: $t.position(),        width: $t.width(),        height: $t.height(),        css_pos: $t.css("position"),        css_left: $t.css("left"),        css_top: $t.css("top"),        css_width: $t.css("width") || "auto",        css_height: $t.css("height") || "auto"      });    });    // set the absolute position    $elements.each(function(){      var $t = $(this),          opos = $t.data("tlrkOriginalPos");      $t.css({        position: "absolute",        left: opos.position.left,        top: opos.position.top,        width: opos.width,        height: opos.height      });    });  }  function restoreFrameElements($elements) {    $elements.each(function(){      var $t = $(this),          opos = $t.data("tlrkOriginalPos");      if (!opos) return      $t.css({        position: opos.css_pos,        left: opos.css_left,        top: opos.css_top,        width: opos.css_width,        height: opos.css_height      });    });  }  var TlrkSlider = function( elem, options ){      this.elem = elem;      this.$elem = $(elem);      this.options = options;    };  // the plugin prototype  TlrkSlider.prototype = {    defaults: {      defaultElementOptions: {        speed: 1200,        easing: "easeInOutBack",        // interval before the element starts moving when the fadeIn/Out functions are called        // it's a good idea to give different delays for the different elements        // if all have the same delay they'll start moving all together        delay: 100       },      // dispose elements are these that are not included in the elements object      // but affect the document flow and will be fadedIn/Out      disposeDelay: 100, // delay for the dispose elements      disposeSpeed: 1000, // how quickly they'll fadeOut/In      delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn      delayAnimation: 7000, // time between auto changing the current frame      loop: true, // if true when clicking next on the last frame the slider jumps to the first one      autoStart: true, // start the automatic looping through the frames on init      framesSelector: "section", // selector for the frames inside the slider      elements: {        "p": {delay: 100, speed: 1000, easing: "easeInOutBack"}      },      navigation: true, // the dots navigation on the bottom      navigationClass: "slider-nav",      // callbacks      // another way to "catch" these events is with      // $(-slider-element-).bind("animationStart")      animationStart: null,      animationEnd: null    },    init: function() {      var c, e, element, $element,          that = this,          $firstFrame;      c = this.config = $.extend({}, this.defaults, this.options);      this.elem.style.position = "relative"; // make the wrapping element relative      // basics      this.$frames = this.$elem.find(c.framesSelector);      this.framesCount = this.$frames.length;      this.currentFrame = 0;      this.queue = [];      this._$elementsByFrame = {};      this._$disposeElementsByFrame = {};      for (i = 0; i < this.framesCount; i++) {        this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame        this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame      }      if (c.navigation) {        generateNavigation(this.$elem, this.framesCount, c);        this.$navigation = this.$elem.find("."+c.navigationClass);      }      // bindings      this.$elem.find(".slider-nav").delegate("a", "click", function(e){        var frame = this.getAttribute("href").split("#")[1];        that.go.call(that, frame);        return false;      });      this.$elem // internal bindings for the callbacks        .bind("animationStart", function(){          if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);}        })        .bind("animationEnd", function(){          if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);}        })      ;      // start animation?      if (c.autoStart) {        this.start();      } else {        this.running = false;      }      return this;    },    start: function(instant) {      var that = this;      if (this.timer) { // we'll clear the current timer        window.clearTimeout(this.timer);      }      this.running = true;      if (instant) {        that.nextFrame();      } else {        this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation);      }    },    stop: function() {      if (!this.running) return; // we are not running      this.running = false;      window.clearTimeout(this.timer);    },    // main function for changing frames    selectFrame: function(frame, dfr) {      var c = this.config, // shorthand for the config          that = this,          dfr = dfr || $.Deferred(),          dFadeIn = $.Deferred(),          dFadeOut = $.Deferred();      if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) {        dfr.reject();        return dfr.promise();      }      // clear the animation loop interval if the animation is running      if (this.running && this.timer) {         window.clearTimeout(this.timer);      }      // check if we are currenly running an animation.      if (this.animated && this.queue.length > 0) {        // wait for the last item in the queue to finish        this.queue[this.queue.length-1].done(function(){          that.selectFrame(frame, dfr); // and call again the selectFrame        })        return dfr.promise();      }      this.animated = true;      this.$elem.trigger("animationStart", [this, frame]);      this.queue.push(dfr);      // fade the frames      dFadeOut = this._fadeOutFrame(this.currentFrame);      // hide the fadetout frame      dFadeOut.done(function(){        that.$frames.eq(that.currentFrame).hide();      });      window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame        dFadeIn = that._fadeInFrame.call(that, frame).done(function(){          // when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise          $.when(dFadeOut, dFadeIn).done(function(){            that.animated = false;            that.queue.shift();            that.$elem.trigger("animationEnd", [that]);            that.currentFrame = frame;            dfr.resolve();          });        });      }, c.delayBetweenTransition);      // navigation html change      if (this.config.navigation) {        this.$navigation.find(".selected").removeClass("selected").end()          .find("a").eq(frame).addClass("selected");      }      dfr.done(function(){ // we'll resume the loop animation after the transitions are done        if (that.running) {          that.start();        }      });      return dfr.promise();    },    _fadeFrame: function(frame, callback, direction) {      var dfr = $.Deferred(),          $frame = this.$frames.eq(frame),          $elements = this._$elementsByFrame[frame],          windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element           i, len,          that = this,          elementAnimations = [],          $disposeElements = this._$disposeElementsByFrame[frame],          $affectedElements,          frameLeft = $frame.offset().left;      direction = direction || "out";      if (!$.isFunction(callback)) return; // do nothing if there's no callback passed      $affectedElements = $elements.add($disposeElements);      // position absolute the animation and dispose elements      absolutize($affectedElements);      // toggle the dispose elements      if ($disposeElements.length > 0) {        window.setTimeout(function(){          $disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed);        }, this.config.disposeDelay);      }      // invoke the callback for each element      // the callback must return a promise      $elements.each(function(){        elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) );      });      // wait for all the elements to finish their animation      $.when.apply(this, elementAnimations).done(function(){        //restoreFrameElements($affectedElements); // and restore the elements' position        dfr.resolve(); // resolve the fade function      });      return dfr.promise();    },    _fadeOutFrame: function(frame) {      var dfr = $.Deferred(),          $frame = this.$frames.eq(frame),          $disposeElements = this._$disposeElementsByFrame[frame];      this._fadeFrame(frame, this._animationOut, "out").done(function(){        dfr.resolve();      })      return dfr.promise();    },    _fadeInFrame: function(frame) {      var dfr = $.Deferred(),          $frame = this.$frames.eq(frame),          $elements = this._$elementsByFrame[frame];      this._restoreFrame(frame);      $frame.show();      this._fadeFrame(frame, this._animationIn, "in").done(function(){        dfr.resolve();      });      return dfr.promise();    },    _restoreFrame: function(frame){      if (!frame) return      restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) );    },    nextFrame: function() {      var frame = this.currentFrame+1,          dfr = $.Deferred();      if (frame > this.framesCount-1) {        if (this.config.loop) {          frame = 0;        } else {          dfr.reject();        }      };      this.selectFrame(frame).done(function(){        dfr.resolve();      });      return dfr.promise();    },    prevFrame: function() {      var frame = this.currentFrame-1,          dfr = $.Deferred();      if (frame < 0) {        if (this.config.loop) {          frame = this.framesCount-1;        } else {          dfr.reject();          return dfr.promise();        }      }      this.selectFrame(frame).done(function(){        dfr.resolve();      });      return dfr.promise();    },    go: function(str) { // shorthand      switch (str) {        case "next":        case "+1":          this.nextFrame();          break;        case "prev":        case "-1":          this.prevFrame();          break;        case "first":          this.selectFrame(0);          break;        case "last":          this.selectFrame(this.framesCount-1);          break;        default:          if (isNaN(str)) return;          this.selectFrame(Number(str));      }    },    // returns jquery collection of animation elements    _getFrameElements: function(frame) {       var $frame = this.$frames.eq(frame),          elements = this.config.elements,          e, elementOptions,          $found, $frameElements = $([]);      for (e in elements) {        elementOptions = elements[e];        $found = $frame.find(e);        $found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions ));        $frameElements = $frameElements.add($found);      }      return $frameElements;    },    // returns jquery collection of elements that have to be faded out    // i.e. elements on the same level as the animation elements    // that doesn't contain other animation elements    _getDisposeFrameElements: function(frame) {      var $disposeElements = $([]),          $frame = this.$frames.eq(frame),          $elements = this._$elementsByFrame[frame];      $elements.each(function(){        var $t = $(this),            $siblings = $t.siblings().not(".t-frame-element");        $siblings.each(function(){          var $t = $(this);          // check if the node is not already marked and doesn't contains other frame elements          if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) {            $t.addClass("t-frame-dispose");            $disposeElements = $disposeElements.add($t);          }        });      });      return $disposeElements;    },    // expose the internal animationIn/Out functions that are called for each element in the frame    // two arguments are passed - the $element which have to be animated and the window width    _animationIn: sweepIn,    _animationOut: sweepOut  }  TlrkSlider.defaults = TlrkSlider.prototype.defaults;  $.fn.tlrkSlider = function(options) {    var otherArgs = Array.prototype.slice.call(arguments, 1);    return this.each(function() {      var $el = $(this),          pluginData = $el.data("tlrkSlider");      if (!pluginData) { // check if the slider is already attached        pluginData = new TlrkSlider(this, options).init();        $el.data("tlrkSlider", pluginData);        return;      }      //change the options or call a method      if (typeof options === "string") {        // setting / getting option(s)        if (options === "option") {          if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value            pluginData.config[otherArgs[0]] = otherArgs[1];           }          if (typeof otherArgs[0] === "object") { // extend the config with new options            pluginData.config = $.extend(pluginData.config, otherArgs[0]);          }        } else { // call a method?          try {            pluginData[options].apply(pluginData, otherArgs);          } catch(ex) {            throw "Error calling a plugin method (" + ex + ")";          }        }      }    });  };  window.TlrkSlider = TlrkSlider;})( jQuery, window , document );

下面是页面调用的JS代码：

$(document).ready(function(){  var $backgrounds = $(".header-content").find(".parallax-bg"),      LAYER_OFFSET = 30,      PRLX_SPEED = 1500,      $slider;  $slider = $("#slider").tlrkSlider({    autoStart: true,    animationStart: function(ev, slider, step){      var max_steps = this.framesCount;       $backgrounds.each(function(idx, el){        var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx);        $(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED);      });    },    elements: {      "img": {delay: 10},      "h2": {delay: 500},      ".copy": {delay: 800},      ".button": {delay: 1000}    }  });  $(".header-content")    .hover(      function(){$(this).find(".slider-prev, .slider-next").show();},      function(){$(this).find(".slider-prev, .slider-next").hide();}    )    .find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end()    .find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; });});

在线演示源码下载