• 文字广告位
  • 文字广告位
  • 文字广告位
您现在的位置: 站长手册 >> 特效代码 >> 其他类 >> 正文
站内搜索
Google
[图文]单行循环滚动的新闻列表代码
          ★★★   

单行循环滚动的新闻列表代码

雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks
人气: 来源:本站原创 作者:佚名 所属栏目:其他类 [切换到繁體中文]
介绍:此为单行滚动显示的列表特效,节省网页空间。

演示:

[Ctrl+A全选 提示:你可先修改部分代码,再按运行]

下面教你如何应用此特效: JS文件下载:jquery-1[1].2.1.pack.js
 --------------------------------------------------------------------------------------
  需要在<body 这里>加入的代码:
 --------------------------------------------------------------------------------------
以下代码加到<head>…</head>中
以下代码加到<body>…</body>中
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.zzsc.org/texiao/zzsc_demo/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>
<div id="scrollDiv">
  <ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
  </ul>
</div>

***请再次刷新查看效果,或保存到本地浏览***

网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
姓 名: *(必填项) ·注册用户·
Email: QQ号:
评 分: 1分 2分 3分 4分 5分
  • 您可以发表评论支持你喜欢的文章。
  • 请遵守《互联网电子公告服务管理规定》
  • 请遵守中华人民共和国各项有关法律法规。
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 评论人需对自己在使用评论过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表个人观点,与本网站立场无关。
站内特效搜索
| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | | 京ICP备 05004866号 |
版权所有 2007-2008 站长手册 WWW.ZZSC.ORG 业务联系 zzsc.org#gmail.com