jQuery - continuous vertical content slider - old school news marquee
HTML
<div id="container">
<div id="content">
<ul> <li>askld</li></ul>
</div>
</div>
CSS
#container {position:relative;height:100px;width:500px;overflow:hidden;border:1px solid black;}
#container #content {position:absolute;left:20px;width:460px;}
JavaScript
function autoScroll($element) {
var elementData = $element.data();
if (!elementData.scrollInProgress) {
var elementHeight = $element.height();
var elementScrollStartPosition = $element.parent().height();
var elementScrollEndPosition = -elementHeight;
var elementScrollDurationFactor = 50; // milliseconds per pixel
//
$element.data({
scrollInProgress: true,
scrollStartPosition: elementScrollStartPosition,
scrollEndPosition: elementScrollEndPosition,
scrollDurationFactor: elementScrollDurationFactor
});
}
var elementPosition = $element.position();
var elementPositionTop = elementPosition.top;
if (!elementPositionTop || elementPositionTop <= elementData.scrollEndPosition) {
$element.css({'top':elementData.scrollStartPosition+'px'});
//
elementPosition = $element.position();
elementPositionTop = elementPosition.top;
}
var elementScrollDuration = Math.round(elementData.scrollDurationFactor * Math.abs(elementPositionTop - elementData.scrollEndPosition));
console.log(elementScrollDuration);
$element.animate(
{
top:elementData.scrollEndPosition
},
{
duration: elementScrollDuration,
easing: 'linear',
complete: function() { autoScroll($element) }
}
);
}
$(document).ready(function() {
$('#container').on('mouseenter', function() { $('#content').stop(); })
$('#container').on('mouseleave', function() { autoScroll($('#content')); })
autoScroll($('#content'));
});