通过互联网服务提升人类生活品质!
INTERNET SERVICES TO ENHANCE THE QUALITY OF HUMAN LIFE !

公司简介   联系我们   /  
通知公告:  
栏目导航

使用jquery动画animate方法实现上下间隔公告滚动

浏览次数:   更新日期:2016-6-12 12:50:17

JS与HTML部分:

<div id="noticescroll">

<ul>
{eims:list table='info1' etype='notice' row='10' order='seq desc' sql='' tlen='33'}
<li><a href='{eims:field=url}'>{eims:field=title}</a></li>
{eims:/list}
</ul>
</div>
</div>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({marginTop: "-20px"},500,function(){
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);})}
$(function(){setInterval('AutoScroll("#noticescroll")',3000)});

</script>

CSS部分:

#noticescroll {overflow:hidden;height:20px;width:100%; display:block;}
#noticescroll ul {list-style:none; padding:0; margin:0;}
#noticescroll ul li {line-height:20px; height:20px;}
#noticescroll ul li a { display:block;line-height:20px; height:20px;}


注意引入jquery.js 文件

上一篇:没有了下一篇:没有了
      没有留言!
昵称:   验证码:
内容:
 
Powered By 国力软件/EIMS