<!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>
解决方案 »
- ztree节点显示 undefined 求帮忙 急!
- JS自动给文本框的数字加千分位
- 请问如何动态增加表格?我想一次增加几行,而不是一行一行
- javascript自适应高度在IE7.0下有问题。获得的offsetHeight值比在FireFox下得到的大不少
- 这个javascript代码中.prototype bind()这种写法,我没有见过,高手大哥们可以解释一下吗?
- 请问怎么判断用户名密码登录错误?谢谢!
- 有没有在ie和firefox下都能使用的js播放器?
- 怎么样在页面中刷新iframe中的内容
- document.form.ssss.value=XXXXX其中ssss为变量,怎么写
- 在script中如何将一个网页插入到当前网页中?
- window.onload =demo()与window.onload=demo的区别
- 求jquery的可对表格编写,分页,过滤功能的插件
$(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里就可以了!