<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>简单滚动</title> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> </head> <body> <h1>简单滚动</h1> <style type="text/css"> /*简单滚动*/ .scroll{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} .scroll a{height:25px;display:block;padding-left:10px;} </style> <!--简单滚动--> <div class="scroll"> <div> <a>这是公告标题的第一行</a> <a>这是公告标题的第二行</a> <a>这是公告标题的第三行</a> </div> </div> <script type="text/javascript"> // 简单滚动 function AutoScroll(obj){ $(obj).find("div").animate({ marginTop:"-25px" },1000,function(){ $(this).css({marginTop:"0px"}).find("a:first").appendTo(this); }); } $(function(){ setInterval('AutoScroll(".scroll")',3000) }); </script> </body> </html>
// 简单滚动 function AutoScroll(obj){ $(obj).find("div").animate({ marginTop:"-25px" },1000,function(){ $(this).css({marginTop:"0px"}).find("a:first").appendTo(this); }); }
$(function(){ setInterval('AutoScroll(".scroll")',3000)
});
About the author