Merge branch 'master' of git.xpub.nl:/var/www/git.xpub.nl/repos/xpub-lib
commit
a0558a6115
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,486 @@
|
|||||||
|
/**
|
||||||
|
* jQuery.marquee - scrolling text like old marquee element
|
||||||
|
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
|
||||||
|
*/;
|
||||||
|
(function($) {
|
||||||
|
$.fn.marquee = function(options) {
|
||||||
|
return this.each(function() {
|
||||||
|
// Extend the options if any provided
|
||||||
|
var o = $.extend({}, $.fn.marquee.defaults, options),
|
||||||
|
$this = $(this),
|
||||||
|
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth,
|
||||||
|
loopCount = 3,
|
||||||
|
playState = 'animation-play-state',
|
||||||
|
css3AnimationIsSupported = false,
|
||||||
|
|
||||||
|
// Private methods
|
||||||
|
_prefixedEvent = function(element, type, callback) {
|
||||||
|
var pfx = ["webkit", "moz", "MS", "o", ""];
|
||||||
|
for (var p = 0; p < pfx.length; p++) {
|
||||||
|
if (!pfx[p]) type = type.toLowerCase();
|
||||||
|
element.addEventListener(pfx[p] + type, callback, false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_objToString = function(obj) {
|
||||||
|
var tabjson = [];
|
||||||
|
for (var p in obj) {
|
||||||
|
if (obj.hasOwnProperty(p)) {
|
||||||
|
tabjson.push(p + ':' + obj[p]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tabjson.push();
|
||||||
|
return '{' + tabjson.join(',') + '}';
|
||||||
|
},
|
||||||
|
|
||||||
|
_startAnimationWithDelay = function() {
|
||||||
|
$this.timer = setTimeout(animate, o.delayBeforeStart);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
methods = {
|
||||||
|
pause: function() {
|
||||||
|
if (css3AnimationIsSupported && o.allowCss3Support) {
|
||||||
|
$marqueeWrapper.css(playState, 'paused');
|
||||||
|
} else {
|
||||||
|
// pause using pause plugin
|
||||||
|
if ($.fn.pause) {
|
||||||
|
$marqueeWrapper.pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// save the status
|
||||||
|
$this.data('runningStatus', 'paused');
|
||||||
|
// fire event
|
||||||
|
$this.trigger('paused');
|
||||||
|
},
|
||||||
|
|
||||||
|
resume: function() {
|
||||||
|
// resume using css3
|
||||||
|
if (css3AnimationIsSupported && o.allowCss3Support) {
|
||||||
|
$marqueeWrapper.css(playState, 'running');
|
||||||
|
} else {
|
||||||
|
// resume using pause plugin
|
||||||
|
if ($.fn.resume) {
|
||||||
|
$marqueeWrapper.resume();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// save the status
|
||||||
|
$this.data('runningStatus', 'resumed');
|
||||||
|
// fire event
|
||||||
|
$this.trigger('resumed');
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle: function() {
|
||||||
|
methods[$this.data('runningStatus') == 'resumed' ? 'pause' : 'resume']();
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function() {
|
||||||
|
// Clear timer
|
||||||
|
clearTimeout($this.timer);
|
||||||
|
// Unbind all events
|
||||||
|
$this.find("*").addBack().unbind();
|
||||||
|
// Just unwrap the elements that has been added using this plugin
|
||||||
|
$this.html($this.find('.js-marquee:first').html());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check for methods
|
||||||
|
if (typeof options === 'string') {
|
||||||
|
if ($.isFunction(methods[options])) {
|
||||||
|
// Following two IF statements to support public methods
|
||||||
|
if (!$marqueeWrapper) {
|
||||||
|
$marqueeWrapper = $this.find('.js-marquee-wrapper');
|
||||||
|
}
|
||||||
|
if ($this.data('css3AnimationIsSupported') === true) {
|
||||||
|
css3AnimationIsSupported = true;
|
||||||
|
}
|
||||||
|
methods[options]();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Check if element has data attributes. They have top priority
|
||||||
|
For details https://twitter.com/aamirafridi/status/403848044069679104 - Can't find a better solution :/
|
||||||
|
jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */
|
||||||
|
var dataAttributes = {},
|
||||||
|
attr;
|
||||||
|
$.each(o, function(key, value) {
|
||||||
|
// Check if element has this data attribute
|
||||||
|
attr = $this.attr('data-' + key);
|
||||||
|
if (typeof attr !== 'undefined') {
|
||||||
|
// Now check if value is boolean or not
|
||||||
|
switch (attr) {
|
||||||
|
case 'true':
|
||||||
|
attr = true;
|
||||||
|
break;
|
||||||
|
case 'false':
|
||||||
|
attr = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
o[key] = attr;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reintroduce speed as an option. It calculates duration as a factor of the container width
|
||||||
|
// measured in pixels per second.
|
||||||
|
if (o.speed) {
|
||||||
|
o.duration = parseInt($this.width(), 10) / o.speed * 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shortcut to see if direction is upward or downward
|
||||||
|
verticalDir = o.direction == 'up' || o.direction == 'down';
|
||||||
|
|
||||||
|
// no gap if not duplicated
|
||||||
|
o.gap = o.duplicated ? parseInt(o.gap) : 0;
|
||||||
|
|
||||||
|
// wrap inner content into a div
|
||||||
|
$this.wrapInner('<div class="js-marquee"></div>');
|
||||||
|
|
||||||
|
// Make copy of the element
|
||||||
|
var $el = $this.find('.js-marquee').css({
|
||||||
|
'margin-right': o.gap,
|
||||||
|
'float': 'left'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (o.duplicated) {
|
||||||
|
$el.clone(true).appendTo($this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// wrap both inner elements into one div
|
||||||
|
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
|
||||||
|
|
||||||
|
// Save the reference of the wrapper
|
||||||
|
$marqueeWrapper = $this.find('.js-marquee-wrapper');
|
||||||
|
|
||||||
|
// If direction is up or down, get the height of main element
|
||||||
|
if (verticalDir) {
|
||||||
|
var containerHeight = $this.height();
|
||||||
|
$marqueeWrapper.removeAttr('style');
|
||||||
|
$this.height(containerHeight);
|
||||||
|
|
||||||
|
// Change the CSS for js-marquee element
|
||||||
|
$this.find('.js-marquee').css({
|
||||||
|
'float': 'none',
|
||||||
|
'margin-bottom': o.gap,
|
||||||
|
'margin-right': 0
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove bottom margin from 2nd element if duplicated
|
||||||
|
if (o.duplicated) $this.find('.js-marquee:last').css({
|
||||||
|
'margin-bottom': 0
|
||||||
|
});
|
||||||
|
|
||||||
|
var elHeight = $this.find('.js-marquee:first').height() + o.gap;
|
||||||
|
|
||||||
|
// adjust the animation duration according to the text length
|
||||||
|
if (o.startVisible && !o.duplicated) {
|
||||||
|
// Compute the complete animation duration and save it for later reference
|
||||||
|
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
|
||||||
|
o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
|
||||||
|
|
||||||
|
// formula is to: (Height of the text node / height of the main container) * duration
|
||||||
|
o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration;
|
||||||
|
} else {
|
||||||
|
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
|
||||||
|
o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// Save the width of the each element so we can use it in animation
|
||||||
|
elWidth = $this.find('.js-marquee:first').width() + o.gap;
|
||||||
|
|
||||||
|
// container width
|
||||||
|
containerWidth = $this.width();
|
||||||
|
|
||||||
|
// adjust the animation duration according to the text length
|
||||||
|
if (o.startVisible && !o.duplicated) {
|
||||||
|
// Compute the complete animation duration and save it for later reference
|
||||||
|
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
|
||||||
|
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
|
||||||
|
|
||||||
|
// (Width of the text node / width of the main container) * duration
|
||||||
|
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration;
|
||||||
|
} else {
|
||||||
|
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
|
||||||
|
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// if duplicated then reduce the duration
|
||||||
|
if (o.duplicated) {
|
||||||
|
o.duration = o.duration / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (o.allowCss3Support) {
|
||||||
|
var
|
||||||
|
elm = document.body || document.createElement('div'),
|
||||||
|
animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000),
|
||||||
|
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
|
||||||
|
animationString = 'animation',
|
||||||
|
animationCss3Str = '',
|
||||||
|
keyframeString = '';
|
||||||
|
|
||||||
|
// Check css3 support
|
||||||
|
if (elm.style.animation !== undefined) {
|
||||||
|
keyframeString = '@keyframes ' + animationName + ' ';
|
||||||
|
css3AnimationIsSupported = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (css3AnimationIsSupported === false) {
|
||||||
|
for (var i = 0; i < domPrefixes.length; i++) {
|
||||||
|
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
|
||||||
|
var prefix = '-' + domPrefixes[i].toLowerCase() + '-';
|
||||||
|
animationString = prefix + animationString;
|
||||||
|
playState = prefix + playState;
|
||||||
|
keyframeString = '@' + prefix + 'keyframes ' + animationName + ' ';
|
||||||
|
css3AnimationIsSupported = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (css3AnimationIsSupported) {
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's infinite ' + o.css3easing;
|
||||||
|
$this.data('css3AnimationIsSupported', true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _rePositionVertically = function() {
|
||||||
|
$marqueeWrapper.css('transform', 'translateY(' + (o.direction == 'up' ? containerHeight + 'px' : '-' + elHeight + 'px') + ')');
|
||||||
|
},
|
||||||
|
_rePositionHorizontally = function() {
|
||||||
|
$marqueeWrapper.css('transform', 'translateX(' + (o.direction == 'left' ? containerWidth + 'px' : '-' + elWidth + 'px') + ')');
|
||||||
|
};
|
||||||
|
|
||||||
|
// if duplicated option is set to true than position the wrapper
|
||||||
|
if (o.duplicated) {
|
||||||
|
if (verticalDir) {
|
||||||
|
if (o.startVisible) {
|
||||||
|
$marqueeWrapper.css('transform', 'translateY(0)');
|
||||||
|
} else {
|
||||||
|
$marqueeWrapper.css('transform', 'translateY(' + (o.direction == 'up' ? containerHeight + 'px' : '-' + ((elHeight * 2) - o.gap) + 'px') + ')');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (o.startVisible) {
|
||||||
|
$marqueeWrapper.css('transform', 'translateX(0)');
|
||||||
|
} else {
|
||||||
|
$marqueeWrapper.css('transform', 'translateX(' + (o.direction == 'left' ? containerWidth + 'px' : '-' + ((elWidth * 2) - o.gap) + 'px') + ')');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the text starts out visible we can skip the two initial loops
|
||||||
|
if (!o.startVisible) {
|
||||||
|
loopCount = 1;
|
||||||
|
}
|
||||||
|
} else if (o.startVisible) {
|
||||||
|
// We only have two different loops if marquee is duplicated and starts visible
|
||||||
|
loopCount = 2;
|
||||||
|
} else {
|
||||||
|
if (verticalDir) {
|
||||||
|
_rePositionVertically();
|
||||||
|
} else {
|
||||||
|
_rePositionHorizontally();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animate recursive method
|
||||||
|
var animate = function() {
|
||||||
|
if (o.duplicated) {
|
||||||
|
// When duplicated, the first loop will be scroll longer so double the duration
|
||||||
|
if (loopCount === 1) {
|
||||||
|
o._originalDuration = o.duration;
|
||||||
|
if (verticalDir) {
|
||||||
|
o.duration = o.direction == 'up' ? o.duration + (containerHeight / ((elHeight) / o.duration)) : o.duration * 2;
|
||||||
|
} else {
|
||||||
|
o.duration = o.direction == 'left' ? o.duration + (containerWidth / ((elWidth) / o.duration)) : o.duration * 2;
|
||||||
|
}
|
||||||
|
// Adjust the css3 animation as well
|
||||||
|
if (animationCss3Str) {
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
|
||||||
|
}
|
||||||
|
loopCount++;
|
||||||
|
}
|
||||||
|
// On 2nd loop things back to normal, normal duration for the rest of animations
|
||||||
|
else if (loopCount === 2) {
|
||||||
|
o.duration = o._originalDuration;
|
||||||
|
// Adjust the css3 animation as well
|
||||||
|
if (animationCss3Str) {
|
||||||
|
animationName = animationName + '0';
|
||||||
|
keyframeString = $.trim(keyframeString) + '0 ';
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
|
||||||
|
}
|
||||||
|
loopCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (verticalDir) {
|
||||||
|
if (o.duplicated) {
|
||||||
|
|
||||||
|
// Adjust the starting point of animation only when first loops finishes
|
||||||
|
if (loopCount > 2) {
|
||||||
|
$marqueeWrapper.css('transform', 'translateY(' + (o.direction == 'up' ? 0 : '-' + elHeight + 'px') + ')');
|
||||||
|
}
|
||||||
|
|
||||||
|
animationCss = {
|
||||||
|
'transform': 'translateY(' + (o.direction == 'up' ? '-' + elHeight + 'px' : 0) + ')'
|
||||||
|
};
|
||||||
|
} else if (o.startVisible) {
|
||||||
|
// This loop moves the marquee out of the container
|
||||||
|
if (loopCount === 2) {
|
||||||
|
// Adjust the css3 animation as well
|
||||||
|
if (animationCss3Str) {
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
|
||||||
|
}
|
||||||
|
animationCss = {
|
||||||
|
'transform': 'translateY(' + (o.direction == 'up' ? '-' + elHeight + 'px' : containerHeight + 'px') + ')'
|
||||||
|
};
|
||||||
|
loopCount++;
|
||||||
|
} else if (loopCount === 3) {
|
||||||
|
// Set the duration for the animation that will run forever
|
||||||
|
o.duration = o._completeDuration;
|
||||||
|
// Adjust the css3 animation as well
|
||||||
|
if (animationCss3Str) {
|
||||||
|
animationName = animationName + '0';
|
||||||
|
keyframeString = $.trim(keyframeString) + '0 ';
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
|
||||||
|
}
|
||||||
|
_rePositionVertically();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
_rePositionVertically();
|
||||||
|
animationCss = {
|
||||||
|
'transform': 'translateY(' + (o.direction == 'up' ? '-' + ($marqueeWrapper.height()) + 'px' : containerHeight + 'px') + ')'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (o.duplicated) {
|
||||||
|
|
||||||
|
// Adjust the starting point of animation only when first loops finishes
|
||||||
|
if (loopCount > 2) {
|
||||||
|
$marqueeWrapper.css('transform', 'translateX(' + (o.direction == 'left' ? 0 : '-' + elWidth + 'px') + ')');
|
||||||
|
}
|
||||||
|
|
||||||
|
animationCss = {
|
||||||
|
'transform': 'translateX(' + (o.direction == 'left' ? '-' + elWidth + 'px' : 0) + ')'
|
||||||
|
};
|
||||||
|
|
||||||
|
} else if (o.startVisible) {
|
||||||
|
// This loop moves the marquee out of the container
|
||||||
|
if (loopCount === 2) {
|
||||||
|
// Adjust the css3 animation as well
|
||||||
|
if (animationCss3Str) {
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
|
||||||
|
}
|
||||||
|
animationCss = {
|
||||||
|
'transform': 'translateX(' + (o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')'
|
||||||
|
};
|
||||||
|
loopCount++;
|
||||||
|
} else if (loopCount === 3) {
|
||||||
|
// Set the duration for the animation that will run forever
|
||||||
|
o.duration = o._completeDuration;
|
||||||
|
// Adjust the css3 animation as well
|
||||||
|
if (animationCss3Str) {
|
||||||
|
animationName = animationName + '0';
|
||||||
|
keyframeString = $.trim(keyframeString) + '0 ';
|
||||||
|
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
|
||||||
|
}
|
||||||
|
_rePositionHorizontally();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
_rePositionHorizontally();
|
||||||
|
animationCss = {
|
||||||
|
'transform': 'translateX(' + (o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// fire event
|
||||||
|
$this.trigger('beforeStarting');
|
||||||
|
|
||||||
|
// If css3 support is available than do it with css3, otherwise use jQuery as fallback
|
||||||
|
if (css3AnimationIsSupported) {
|
||||||
|
// Add css3 animation to the element
|
||||||
|
$marqueeWrapper.css(animationString, animationCss3Str);
|
||||||
|
var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}',
|
||||||
|
$styles = $marqueeWrapper.find('style');
|
||||||
|
|
||||||
|
// Now add the keyframe animation to the marquee element
|
||||||
|
if ($styles.length !== 0) {
|
||||||
|
// Bug fixed for jQuery 1.3.x - Instead of using .last(), use following
|
||||||
|
$styles.filter(":last").html(keyframeCss);
|
||||||
|
} else {
|
||||||
|
$('head').append('<style>' + keyframeCss + '</style>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation iteration event
|
||||||
|
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() {
|
||||||
|
$this.trigger('finished');
|
||||||
|
});
|
||||||
|
// Animation stopped
|
||||||
|
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() {
|
||||||
|
animate();
|
||||||
|
$this.trigger('finished');
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// Start animating
|
||||||
|
$marqueeWrapper.animate(animationCss, o.duration, o.easing, function() {
|
||||||
|
// fire event
|
||||||
|
$this.trigger('finished');
|
||||||
|
// animate again
|
||||||
|
if (o.pauseOnCycle) {
|
||||||
|
_startAnimationWithDelay();
|
||||||
|
} else {
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// save the status
|
||||||
|
$this.data('runningStatus', 'resumed');
|
||||||
|
};
|
||||||
|
|
||||||
|
// bind pause and resume events
|
||||||
|
$this.bind('pause', methods.pause);
|
||||||
|
$this.bind('resume', methods.resume);
|
||||||
|
|
||||||
|
if (o.pauseOnHover) {
|
||||||
|
$this.bind('mouseenter', methods.pause);
|
||||||
|
$this.bind('mouseleave', methods.resume);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If css3 animation is supported than call animate method at once
|
||||||
|
if (css3AnimationIsSupported && o.allowCss3Support) {
|
||||||
|
animate();
|
||||||
|
} else {
|
||||||
|
// Starts the recursive method
|
||||||
|
_startAnimationWithDelay();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}; // End of Plugin
|
||||||
|
// Public: plugin defaults options
|
||||||
|
$.fn.marquee.defaults = {
|
||||||
|
// If you wish to always animate using jQuery
|
||||||
|
allowCss3Support: true,
|
||||||
|
// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
|
||||||
|
css3easing: 'linear',
|
||||||
|
// requires jQuery easing plugin. Default is 'linear'
|
||||||
|
easing: 'linear',
|
||||||
|
// pause time before the next animation turn in milliseconds
|
||||||
|
delayBeforeStart: 1000,
|
||||||
|
// 'left', 'right', 'up' or 'down'
|
||||||
|
direction: 'left',
|
||||||
|
// true or false - should the marquee be duplicated to show an effect of continues flow
|
||||||
|
duplicated: false,
|
||||||
|
// duration in milliseconds of the marquee in milliseconds
|
||||||
|
duration: 5000,
|
||||||
|
// gap in pixels between the tickers
|
||||||
|
gap: 20,
|
||||||
|
// on cycle pause the marquee
|
||||||
|
pauseOnCycle: false,
|
||||||
|
// on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
|
||||||
|
pauseOnHover: false,
|
||||||
|
// the marquee is visible initially positioned next to the border towards it will be moving
|
||||||
|
startVisible: false
|
||||||
|
};
|
||||||
|
})(jQuery);
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* jQuery.marquee - scrolling text like old marquee element
|
||||||
|
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
|
||||||
|
*/
|
||||||
|
(function(f){f.fn.marquee=function(x){return this.each(function(){var a=f.extend({},f.fn.marquee.defaults,x),b=f(this),c,t,e=3,y="animation-play-state",p=!1,E=function(a,b,c){for(var e=["webkit","moz","MS","o",""],d=0;d<e.length;d++)e[d]||(b=b.toLowerCase()),a.addEventListener(e[d]+b,c,!1)},F=function(a){var b=[],c;for(c in a)a.hasOwnProperty(c)&&b.push(c+":"+a[c]);b.push();return"{"+b.join(",")+"}"},l={pause:function(){p&&a.allowCss3Support?c.css(y,"paused"):f.fn.pause&&c.pause();b.data("runningStatus",
|
||||||
|
"paused");b.trigger("paused")},resume:function(){p&&a.allowCss3Support?c.css(y,"running"):f.fn.resume&&c.resume();b.data("runningStatus","resumed");b.trigger("resumed")},toggle:function(){l["resumed"==b.data("runningStatus")?"pause":"resume"]()},destroy:function(){clearTimeout(b.timer);b.find("*").addBack().unbind();b.html(b.find(".js-marquee:first").html())}};if("string"===typeof x)f.isFunction(l[x])&&(c||(c=b.find(".js-marquee-wrapper")),!0===b.data("css3AnimationIsSupported")&&(p=!0),l[x]());else{var u;
|
||||||
|
f.each(a,function(c,d){u=b.attr("data-"+c);if("undefined"!==typeof u){switch(u){case "true":u=!0;break;case "false":u=!1}a[c]=u}});a.speed&&(a.duration=parseInt(b.width(),10)/a.speed*1E3);var v="up"==a.direction||"down"==a.direction;a.gap=a.duplicated?parseInt(a.gap):0;b.wrapInner('<div class="js-marquee"></div>');var h=b.find(".js-marquee").css({"margin-right":a.gap,"float":"left"});a.duplicated&&h.clone(!0).appendTo(b);b.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
|
||||||
|
c=b.find(".js-marquee-wrapper");if(v){var k=b.height();c.removeAttr("style");b.height(k);b.find(".js-marquee").css({"float":"none","margin-bottom":a.gap,"margin-right":0});a.duplicated&&b.find(".js-marquee:last").css({"margin-bottom":0});var q=b.find(".js-marquee:first").height()+a.gap;a.startVisible&&!a.duplicated?(a._completeDuration=(parseInt(q,10)+parseInt(k,10))/parseInt(k,10)*a.duration,a.duration*=parseInt(q,10)/parseInt(k,10)):a.duration*=(parseInt(q,10)+parseInt(k,10))/parseInt(k,10)}else{var m=
|
||||||
|
b.find(".js-marquee:first").width()+a.gap;var n=b.width();a.startVisible&&!a.duplicated?(a._completeDuration=(parseInt(m,10)+parseInt(n,10))/parseInt(n,10)*a.duration,a.duration*=parseInt(m,10)/parseInt(n,10)):a.duration*=(parseInt(m,10)+parseInt(n,10))/parseInt(n,10)}a.duplicated&&(a.duration/=2);if(a.allowCss3Support){h=document.body||document.createElement("div");var g="marqueeAnimation-"+Math.floor(1E7*Math.random()),A=["Webkit","Moz","O","ms","Khtml"],B="animation",d="",r="";h.style.animation&&
|
||||||
|
(r="@keyframes "+g+" ",p=!0);if(!1===p)for(var z=0;z<A.length;z++)if(void 0!==h.style[A[z]+"AnimationName"]){h="-"+A[z].toLowerCase()+"-";B=h+B;y=h+y;r="@"+h+"keyframes "+g+" ";p=!0;break}p&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s infinite "+a.css3easing,b.data("css3AnimationIsSupported",!0))}var C=function(){c.css("transform","translateY("+("up"==a.direction?k+"px":"-"+q+"px")+")")},D=function(){c.css("transform","translateX("+("left"==a.direction?n+"px":"-"+m+"px")+")")};a.duplicated?
|
||||||
|
(v?a.startVisible?c.css("transform","translateY(0)"):c.css("transform","translateY("+("up"==a.direction?k+"px":"-"+(2*q-a.gap)+"px")+")"):a.startVisible?c.css("transform","translateX(0)"):c.css("transform","translateX("+("left"==a.direction?n+"px":"-"+(2*m-a.gap)+"px")+")"),a.startVisible||(e=1)):a.startVisible?e=2:v?C():D();var w=function(){a.duplicated&&(1===e?(a._originalDuration=a.duration,a.duration=v?"up"==a.direction?a.duration+k/(q/a.duration):2*a.duration:"left"==a.direction?a.duration+n/
|
||||||
|
(m/a.duration):2*a.duration,d&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s "+a.css3easing),e++):2===e&&(a.duration=a._originalDuration,d&&(g+="0",r=f.trim(r)+"0 ",d=g+" "+a.duration/1E3+"s 0s infinite "+a.css3easing),e++));v?a.duplicated?(2<e&&c.css("transform","translateY("+("up"==a.direction?0:"-"+q+"px")+")"),t={transform:"translateY("+("up"==a.direction?"-"+q+"px":0)+")"}):a.startVisible?2===e?(d&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s "+a.css3easing),t={transform:"translateY("+
|
||||||
|
("up"==a.direction?"-"+q+"px":k+"px")+")"},e++):3===e&&(a.duration=a._completeDuration,d&&(g+="0",r=f.trim(r)+"0 ",d=g+" "+a.duration/1E3+"s 0s infinite "+a.css3easing),C()):(C(),t={transform:"translateY("+("up"==a.direction?"-"+c.height()+"px":k+"px")+")"}):a.duplicated?(2<e&&c.css("transform","translateX("+("left"==a.direction?0:"-"+m+"px")+")"),t={transform:"translateX("+("left"==a.direction?"-"+m+"px":0)+")"}):a.startVisible?2===e?(d&&(d=g+" "+a.duration/1E3+"s "+a.delayBeforeStart/1E3+"s "+a.css3easing),
|
||||||
|
t={transform:"translateX("+("left"==a.direction?"-"+m+"px":n+"px")+")"},e++):3===e&&(a.duration=a._completeDuration,d&&(g+="0",r=f.trim(r)+"0 ",d=g+" "+a.duration/1E3+"s 0s infinite "+a.css3easing),D()):(D(),t={transform:"translateX("+("left"==a.direction?"-"+m+"px":n+"px")+")"});b.trigger("beforeStarting");if(p){c.css(B,d);var h=r+" { 100% "+F(t)+"}",l=c.find("style");0!==l.length?l.filter(":last").html(h):f("head").append("<style>"+h+"</style>");E(c[0],"AnimationIteration",function(){b.trigger("finished")});
|
||||||
|
E(c[0],"AnimationEnd",function(){w();b.trigger("finished")})}else c.animate(t,a.duration,a.easing,function(){b.trigger("finished");a.pauseOnCycle?b.timer=setTimeout(w,a.delayBeforeStart):w()});b.data("runningStatus","resumed")};b.bind("pause",l.pause);b.bind("resume",l.resume);a.pauseOnHover&&(b.bind("mouseenter",l.pause),b.bind("mouseleave",l.resume));p&&a.allowCss3Support?w():b.timer=setTimeout(w,a.delayBeforeStart)}})};f.fn.marquee.defaults={allowCss3Support:!0,css3easing:"linear",easing:"linear",
|
||||||
|
delayBeforeStart:1E3,direction:"left",duplicated:!1,duration:5E3,gap:20,pauseOnCycle:!1,pauseOnHover:!1,startVisible:!1}})(jQuery);
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue