[jQuery] text를 위로 rolling 시키기

자바 2011.06.28 10:52

<div id="scrolltextup" style="border:1px ridge #004F72; overflow:hidden;
     position:relative; width:500px; height:20px;">
  <div id="textup" style="text-align:center; position:absolute; top:0;
      left:0; width:500px;">
    <div style="line-height:20px;">
      +++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
      +++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

 

<script type="text/javascript">
var scrollheight = $("#textup").height();

function scrolltextup(dur){
  $("#textup").animate({"top":"-=20"},{
    duration: dur,
    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});
      }
      setTimeout("scrolltextup(1000)", 100);
    }
  });
}
setTimeout("scrolltextup(1000)", 100);
</script>

http://zdev.cafe24.com/jQueryStudy/jq_scroll.jsp

이 글은 스프링노트에서 작성되었습니다.

'자바' 카테고리의 다른 글

[Javascript] 함수들..  (0) 2011.06.28
[jQuery&Ajax&Json] 연동  (0) 2011.06.28
[jQuery] text를 위로 rolling 시키기  (0) 2011.06.28
[html] 화면 정가운데에 보여주는 태그  (0) 2011.06.28
Strategy  (0) 2011.06.28
Observer  (0) 2011.06.28