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

2020-04-24 19:05:00易采站长站整理

$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();},