<!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>
<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>
$(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"); });
<!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>
把 else分支的语句写进if里就可以了!