求一段js

div 固定高度600px，宽度100%
动态从数据库中取30条数据js实现取出的数据逐条向上滚动，这个怎么实现？另：页面刚开始使用时，可能数据没有30条，也要实现滚动效果求解，谢谢了。

解决方案 »

  1.   

    数据放<marquee>里就行了。然后向marquee里动态添加数据。
      

  2.   

    要引jquery.js要引jquery.js<html>
    <head>
    <title>
    Untitled
    </title>
    <script type="text/javascript" src="jquery.js">
    </script>
    <script>
    $(document).ready(function() { function gun(id1, className, num, top) { var len = $(className).length; var nHeight = $(className).height();
    var index = 0;
    var adTimer = setInterval(function() {
    scroll(index);
    index++;
    if (index == len) {
    index = 0;
    }
    },
    3000); var str = $(id1).html(); $(id1).hover(function() {
    clearInterval(adTimer);
    },
    function() { adTimer = setInterval(function() {
    scroll(index);
    index++;
    if (index == len) {
    index = 0;
    }
    },
    3000);
    }).trigger("mouseleave");
    function scroll(index) { if (len - index <= num) {
    $(id1).append($(str)); $(id1).animate({
    top: -index * (nHeight + top)
    },
    1500);
    len = $(className).length;
    } else {
    $(id1).animate({
    top: -index * (nHeight + top)
    },
    1500);
    }
    }
    } gun("#comment_div1", "#comment_div1 .comment", 5, 11);
    });
    </script>
    </head>
    <body>
    <div style="width:979px;  height:auto !important; min-height:330px; height:330px; margin:auto; padding-top:10px;">
    <div id="comment_div" style="position: relative;width:298px; margin-left:10px; border-top:1px solid #cccccc; height:300px;  float:left;overflow:hidden;">
    <div id="comment_div1" style="position: absolute;">
    <div class="comment" style="width:298px; height:50px; border-bottom:1px dashed #dddddd; margin-top:10px;">
    <div style="width:50px; height:50px; float:left;">
    <img src="user_pic/CR-d8rfdOp7Aj.jpg" height="46" width="46" />
    </div>
    <div style="width:240px; height:40px; padding-top:10px; float:right; font-family:'宋体'; font-size:12px; line-height:18px; color:#666666;overflow:hidden;word-break: break-all;">
    <a href="product_show.php?ID=1325">
    sssssssssssssssssssssssssssssssss
    </a>
    &nbsp;&nbsp
    </div>
    </div>
    <div class="comment" style="width:298px; height:50px; border-bottom:1px dashed #dddddd; margin-top:10px;">
    <div style="width:50px; height:50px; float:left;">
    <img src="user_pic/CR-d8rfdOp7Aj.jpg" height="46" width="46" />
    </div>
    <div style="width:240px; height:40px; padding-top:10px; float:right; font-family:'宋体'; font-size:12px; line-height:18px; color:#666666;overflow:hidden;word-break: break-all;">
    <a href="product_show.php?ID=1325">
    sssssssssssssssssss
    </a>
    &nbsp;&nbsp
    </div>
    </div>
    <div class="comment" style="width:298px; height:50px; border-bottom:1px dashed #dddddd; margin-top:10px;">
    <div style="width:50px; height:50px; float:left;">
    <img src="user_pic/CR-d8rfdOp7Aj.jpg" height="46" width="46" />
    </div>
    <div style="width:240px; height:40px; padding-top:10px; float:right; font-family:'宋体'; font-size:12px; line-height:18px; color:#666666;overflow:hidden;word-break: break-all;">
    <a href="product_show.php?ID=1319">
    ssssssssssssssssssssssss
    </a>
    &nbsp;&nbsp;asdfghjkl;'dfghjkl;'fghjkl;'
    </div>
    </div>
    <div class="comment" style="width:298px; height:50px; border-bottom:1px dashed #dddddd; margin-top:10px;">
    <div style="width:50px; height:50px; float:left;">
    <img src="user_pic/CR-d8rfdOp7Aj.jpg" height="46" width="46" />
    </div>
    <div style="width:240px; height:40px; padding-top:10px; float:right; font-family:'宋体'; font-size:12px; line-height:18px; color:#666666;overflow:hidden;word-break: break-all;">
    <a href="product_show.php?ID=1323">
    sssssssssssssssssssss
    </a>
    &nbsp;&nbsp;sssssssssssssssssssssssssssssssssssssssssss
    </div>
    </div>
    <div class="comment" style="width:298px; height:50px; border-bottom:1px dashed #dddddd; margin-top:10px;">
    <div style="width:50px; height:50px; float:left;">
    <img src="user_pic/CR-d8rfdOp7Aj.jpg" height="46" width="46" />
    </div>
    <div style="width:240px; height:40px; padding-top:10px; float:right; font-family:'宋体'; font-size:12px; line-height:18px; color:#666666;overflow:hidden;word-break: break-all;">
    <a href="product_show.php?ID=1325">
    ssssssssssssssssssssssssss
    </a>
    &nbsp;&nbsp;ssss
    </div>
    </div>
    <div class="comment" style="width:298px; height:50px; border-bottom:1px dashed #dddddd; margin-top:10px;">
    <div style="width:50px; height:50px; float:left;">
    <img src="user_pic/CR-d8rfdOp7Aj.jpg" height="46" width="46" />
    </div>
    <div style="width:240px; height:40px; padding-top:10px; float:right; font-family:'宋体'; font-size:12px; line-height:18px; color:#666666;overflow:hidden;word-break: break-all;">
    <a href="product_show.php?ID=1308">
    sssssssssssssssssssssssssssssssssss1
    </a>
    &nbsp;&nbsp;dasdasdasadsads
    </div>
    </div>
    </div>
    <div id="colee_bottom2">
    </div>
    </div>
    </div>
    </body></html>