This question already has answers here:
Closed 7 years ago.
Possible Duplicate:
Implementing circular scroller in jquery
I want to create vertical scroller, which will work exactly like marquee. But I want it to be continuous, like when we use marquee the whole content comes back only after it completely goes up, but I want it to be continuous.
this is what I have... http://jsfiddle.net/JWfaf/1/
I want only in one direction and keep on scrolling. I hope I have cleared what I want to achieve
HTML
<div class="con">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
JavaScript
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "+=250px"},
{
duration: speed,
complete: function ()
{
targetElement.animate({ marginTop: "-=250px" },
{
duration: speed,
complete: function ()
{
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('.con ul li:first-child'), 10000);
Working Demo : http://jsfiddle.net/rNXs9/1/
HTML :
<div id="verticalScroller">
<div>1 Lorem ipsum dolor sit</div>
<div>2 Lorem ipsum dolor sit</div>
<div>3 Lorem ipsum dolor sit</div>
<div>4 Lorem ipsum dolor sit</div>
</div>
CSS:
#verticalScroller {
position: absolute;
width:52px;
height: 180px;
overflow: hidden;
}
#verticalScroller > div {
position:absolute;
width:50px;
height:50px;
}
JS :
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if(top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({ top: (parseInt(top)-60) }, 600, function () {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
$("#verticalScroller > div").each(function () {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});
});
Here you are fine sir.
The Code
JS:
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "300px"},
{
duration: speed,
complete: function ()
{
$(targetElement).css('marginTop','-450px');
animatethis(targetElement, speed);
}
});
};
animatethis($('.con ul li:first-child'), 10000);
CSS:
ul{display:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;}
li{display:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;}
.con{display:block;width:200px;height:300px;overflow:hidden;}
HTML:
<a href="#" class="click">click</a>
<div class="con">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>