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

});

希望本文对大家学习javascript程序设计有所帮助。