목록 스크롤 시 자동으로 JS 효과 로드

3773 단어
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
var getMsg = true;
$(document).ready(function() {
$("#msg").scroll(function() {
   if (this.clientHeight + this.scrollTop == this.scrollHeight) {
    //  
    var st = this.scrollTop;
    if (getMsg) {
     getMsg = false;
     //  
     /*
     $.get("./getMessage.jsp", {mid:$("#msgList li:last").attr("mid")}, function(data) {
      //  
      $("#msgList").append(data);
      $("#msgList").scroll(st);
      getMsg = true;
     });
     */
     // 
     var data = "<li mid='58'>1000402:23232<span style='font-size:9px;'>(2008-06-12)</span></li>
<li mid='57'>1000402:321<span style='font-size:9px;'>(2008-06-12)</span></li>
<li mid='56'>1000402:df<span style='font-size:9px;'>(2008-06-12)</span></li>
<li mid='55'>a76:a<span style='font-size:9px;'>(2008-06-12)</span></li>
<li mid='54'> : <span style='font-size:9px;'>(2008-06-11)</span></li>
<li mid='49'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
<li mid='48'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
<li mid='47'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>
<li mid='46'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li>"; $("#msgList").append(data); $("#msgList").scroll(st); getMsg = true; } } }); }); </script> <div style="width:560px; height:150px; text-align:left; margin:0 auto; overflow:auto;" name="msg" id="msg"> <ul style="list-style:none; margin:0; padding:0;" name="msgList" id="msgList"> <li mid='58'>1000402:23232<span style='font-size:9px;'>(2008-06-12)</span></li> <li mid='57'>1000402:321<span style='font-size:9px;'>(2008-06-12)</span></li> <li mid='56'>1000402:df<span style='font-size:9px;'>(2008-06-12)</span></li> <li mid='55'>a76:a<span style='font-size:9px;'>(2008-06-12)</span></li> <li mid='54'> : <span style='font-size:9px;'>(2008-06-11)</span></li> <li mid='49'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li> <li mid='48'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li> <li mid='47'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li> <li mid='46'>1000402:x<span style='font-size:9px;'>(2008-06-11)</span></li> </ul> </div> </BODY> </HTML>

좋은 웹페이지 즐겨찾기