<style type="text/css">
.scroll {
width:100%;
overflow:hidden;
position:relative;
}
.scrollingtext {
white-space:nowrap;
position:absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.scrollingtext').bind('marquee', function () {
marqueeFunction($(this), 'START');
}).trigger('marquee');
$('.scrollingtext').mouseover(function () {
$(this).stop();
});
$('.scrollingtext').mouseout(function () {
marqueeFunction($(this), 'RESUME');
});
});
function marqueeFunction(ob, type) {
// ========== HOROZONTAL ==========
// var tw = ob.width();
// var ww = ob.parent().width();
// if (type == 'START')
// ob.css({ right: -tw });
// ob.animate({ right: ww }, 20000, 'linear', function () {
// ob.trigger('marqueeX');
// });
// ========== VERTICAL ==========
var th = ob.height();
var hh = ob.parent().height();
if (type == 'START')
ob.css({ bottom: -th });
ob.animate({ bottom: hh }, 20000, 'linear', function () {
ob.trigger('marquee');
});
}
</script>
<div class="scroll">
<div class="scrollingtext">Some HTML to scroll as a marquee</div>
</div>