161 lines
6.8 KiB
JavaScript
161 lines
6.8 KiB
JavaScript
|
/**
|
||
|
* author Remy Sharp
|
||
|
* url http:
|
||
|
*/
|
||
|
|
||
|
(function ($) {
|
||
|
$.fn.marquee = function (klass) {
|
||
|
var newMarquee = [],
|
||
|
last = this.length;
|
||
|
|
||
|
|
||
|
|
||
|
function getReset(newDir, marqueeRedux, marqueeState) {
|
||
|
var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
|
||
|
var r = 0;
|
||
|
if (behavior == 'alternate') {
|
||
|
r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
|
||
|
} else if (behavior == 'slide') {
|
||
|
if (newDir == -1) {
|
||
|
r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
|
||
|
} else {
|
||
|
r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
|
||
|
}
|
||
|
} else {
|
||
|
r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
|
||
|
}
|
||
|
return r;
|
||
|
}
|
||
|
|
||
|
|
||
|
function animateMarquee() {
|
||
|
var i = newMarquee.length,
|
||
|
marqueeRedux = null,
|
||
|
$marqueeRedux = null,
|
||
|
marqueeState = {},
|
||
|
newMarqueeList = [],
|
||
|
hitedge = false;
|
||
|
|
||
|
while (i--) {
|
||
|
marqueeRedux = newMarquee[i];
|
||
|
$marqueeRedux = $(marqueeRedux);
|
||
|
marqueeState = $marqueeRedux.data('marqueeState');
|
||
|
|
||
|
if ($marqueeRedux.data('paused') !== true) {
|
||
|
|
||
|
marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);
|
||
|
|
||
|
|
||
|
hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
|
||
|
|
||
|
if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {
|
||
|
if (marqueeState.behavior == 'alternate') {
|
||
|
marqueeState.dir *= -1;
|
||
|
}
|
||
|
marqueeState.last = -1;
|
||
|
|
||
|
$marqueeRedux.trigger('stop');
|
||
|
|
||
|
marqueeState.loops--;
|
||
|
if (marqueeState.loops === 0) {
|
||
|
if (marqueeState.behavior != 'slide') {
|
||
|
marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
|
||
|
} else {
|
||
|
|
||
|
marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
|
||
|
}
|
||
|
|
||
|
$marqueeRedux.trigger('end');
|
||
|
} else {
|
||
|
|
||
|
newMarqueeList.push(marqueeRedux);
|
||
|
$marqueeRedux.trigger('start');
|
||
|
marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
|
||
|
}
|
||
|
} else {
|
||
|
newMarqueeList.push(marqueeRedux);
|
||
|
}
|
||
|
marqueeState.last = marqueeRedux[marqueeState.axis];
|
||
|
|
||
|
|
||
|
$marqueeRedux.data('marqueeState', marqueeState);
|
||
|
} else {
|
||
|
|
||
|
newMarqueeList.push(marqueeRedux);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
newMarquee = newMarqueeList;
|
||
|
|
||
|
if (newMarquee.length) {
|
||
|
setTimeout(animateMarquee, 25);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
this.each(function (i) {
|
||
|
var $marquee = $(this),
|
||
|
width = $marquee.attr('width') || $marquee.width(),
|
||
|
height = $marquee.attr('height') || $marquee.height(),
|
||
|
wrapstyle = /left|right/.test($marquee.attr('direction')) ? 'nowrap' : 'wrap',
|
||
|
$marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + ' style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: '+wrapstyle+';">' + $marquee.html() + '</div></div>').next(),
|
||
|
marqueeRedux = $marqueeRedux.get(0),
|
||
|
hitedge = 0,
|
||
|
direction = ($marquee.attr('direction') || 'left').toLowerCase(),
|
||
|
marqueeState = {
|
||
|
dir : /down|right/.test(direction) ? -1 : 1,
|
||
|
axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
|
||
|
widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
|
||
|
last : -1,
|
||
|
loops : $marquee.attr('loop') || -1,
|
||
|
scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,
|
||
|
behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
|
||
|
width : /left|right/.test(direction) ? width : height
|
||
|
};
|
||
|
|
||
|
|
||
|
if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
|
||
|
marqueeState.loops = 1;
|
||
|
}
|
||
|
|
||
|
$marquee.remove();
|
||
|
|
||
|
|
||
|
if (/left|right/.test(direction)) {
|
||
|
$marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
|
||
|
} else {
|
||
|
$marqueeRedux.find('> div').css('padding', height + 'px 0');
|
||
|
$marqueeRedux.find('> div').css('white-space', 'wrap');
|
||
|
$marqueeRedux.find('> div').css('word-wrap', 'break-word');
|
||
|
$marqueeRedux.find('> div').css('overflow', 'hidden');
|
||
|
$marqueeRedux.find('> div').css('width', width);
|
||
|
}
|
||
|
|
||
|
|
||
|
$marqueeRedux.bind('stop', function () {
|
||
|
$marqueeRedux.data('paused', true);
|
||
|
}).bind('pause', function () {
|
||
|
$marqueeRedux.data('paused', true);
|
||
|
}).bind('start', function () {
|
||
|
$marqueeRedux.data('paused', false);
|
||
|
}).bind('unpause', function () {
|
||
|
$marqueeRedux.data('paused', false);
|
||
|
}).data('marqueeState', marqueeState);
|
||
|
|
||
|
|
||
|
|
||
|
newMarquee.push(marqueeRedux);
|
||
|
|
||
|
marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
|
||
|
$marqueeRedux.trigger('start');
|
||
|
|
||
|
|
||
|
if (i+1 == last) {
|
||
|
animateMarquee();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
return $(newMarquee);
|
||
|
};
|
||
|
}(jQuery));
|