<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery单行滚动</title>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<style>
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},1000,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',3000)
});
</script>
</head>
<body>
<div id="scrollDiv">
    <ul>
        <li>这是公告标题的第一行</li>
        <li>这是公告标题的第二行</li>
        <li>这是公告标题的第三行</li>
        <li>这是公告标题的第四行</li>
        <li>这是公告标题的第五行</li>
        <li>这是公告标题的第六行</li>
        <li>这是公告标题的第七行</li>
        <li>这是公告标题的第八行</li>
    </ul>
</div>
</body>
</html>
这是网上的Jquery实现方式,可以实现单行滚动。但我要加一个第一行字体加粗
就是“<li>这是公告标题的第一行</li>”中的字体加粗!直接加粗后,被滚动到最下面的,第二第三循环往上都变成粗体了,我的目的只想让第一行文字。那位高手帮我看下!
在我实际项目中代码片段如下:
       <div class="list_ntc" id="scrollDiv">
            <ul>
                <asp:Repeater ID="ReaNotic" runat="server">
                    <ItemTemplate>
                        <li style="margin-bottom: 5px;"><a href="news_SiteNoticeDetails.aspx?newsId=<%# Eval("Id")  %>&newsType=SiteNotice"
                            title=' <%# Eval("title") %>'>
                            <%#   GDYYXH.API.StringHelper.GetShortString(Eval("Title").ToString(),25)  %></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
Jquery代码改动入如下
<style  type="text/css">
    .bod
    {
     font-weight:bold
     }
</style>
<script type="text/javascript">
    function AutoScroll(obj) {
        $(obj).find("ul:first").animate({
            marginTop: "-12px"        
        }, 500, function() {
            $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
              $("#scrollDiv ul li:first").addClass("bod");        });
        
           $("#scrollDiv ul li").each(function(){
                if($(this).hasClass("bod"))
                {
                    
                }
                else
                {
                    $(this).removeClass("bod");
                }
              }); 
        
    }
    $(document).ready(function() {
        setInterval('AutoScroll("#scrollDiv")', 5000);
      
    });
</script>

解决方案 »

  1.   

        function AutoScroll(obj) {
            $(obj).find("ul:first").animate({
                marginTop: "-12px"        
            }, 500, function() {
                $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
                  $("#scrollDiv ul li").removeClass("bod");
                  $("#scrollDiv ul li:first").addClass("bod");        });
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>jQuery单行滚动</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <style>
    #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
    #scrollDiv li{height:25px;padding-left:10px;}
    </style>
    <script type="text/javascript">
    function AutoScroll(obj){
    $(obj).find("ul:first").animate({
    marginTop:"-25px"
    },1000,function(){
    $(this).css({marginTop:"0px"}).find("li:first").css({fontWeight:"normal"}).appendTo(this).parent().find("li:first").css({fontWeight:"bold"});;
    });
    }
    $(document).ready(function(){
    setInterval('AutoScroll("#scrollDiv")',3000)
    });
    </script>
    </head>
    <body>
    <div id="scrollDiv">
      <ul>
      <li>这是公告标题的第一行</li>
      <li>这是公告标题的第二行</li>
      <li>这是公告标题的第三行</li>
      <li>这是公告标题的第四行</li>
      <li>这是公告标题的第五行</li>
      <li>这是公告标题的第六行</li>
      <li>这是公告标题的第七行</li>
      <li>这是公告标题的第八行</li>
      </ul>
    </div>
    </body>
    </html>
      

  3.   

    始终是第一行加粗,还是始终是这个特殊的“<li>这是公告标题的第一行</li>”标签加粗????
      

  4.   

    谢谢楼上各位的回复,我已经实现了
     把 else分支的语句写进if里就可以了!