手记

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; });

});

在线演示     源码下载

本文链接:http://www.codeceo.com/article/html5-element-image-player.html
本文作者:码农网 – 小峰


0人推荐
随时随地看视频
慕课网APP