Posted
Filed under Htm&Javascript
[원문] : http://www.htmldrive.net/items/demo/266/jquery-vticker-vertical-news-ticker

div id="scrolltextup" style="background-color:#44b316;border:1px solid #e0e0e0; overflow:hidden; position:relative; width:200px; height:20px;">
<div id="textup" style="text-align:center; position:absolute; top:0; left:0; width:200px;color:#fff;">
<div style="line-height:20px;">
+++text1.<br/>
+++text2.<br/>
+++text3.<br/>
+++text4
</div>
</div>
</div>

<script type="text/javascript">
var rollingTimeIntervalID;
var durationTime = 1000;
var rollingTime = 3000;

function scrollTextUp(){
$("#textup").animate({"top":"-=20"},{
duration: durationTime,
easing: "linear",
complete:function(){
$("#textup").children(":last").after("<div style='line-height:20px;'>"+$("#textup").children(":first").html()+"</div>");
if($("#textup").children(":first").height() <= (parseInt($("#textup").css("top"))*-1)){
$("#textup").children(":first").remove();
$("#textup").css({"top":0});
}
}
});
}
rollingTimeIntervalID = setInterval(scrollTextUp, rollingTime);
</script>

2012/12/26 18:23 2012/12/26 18:23