JQuery设置数据滑动展示效果
- 新建一个index.html页面，写入代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>数据轮滑效果</title> <script type = "text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type = "text/javascript" src="../js/index.js"></script> <link rel="stylesheet" href="../css/index.css" /> </head> <body> <div id="scrollDiv"> <div> <div><a href='http://www.miiceic.org.cn/'>石家庄</a></div> <div><a href='http://www.ciitn.com/'>衡水</a></div> <div><a href="http://www.amboedu.com/">邯郸</a></div> </div> </div> </body> </html> - 在index.css中设置css样式
div,div { margin:0; padding:0 } #scrollDiv { width:300px; height:25px; line-height:25px; border:#ccc 1px solid; overflow:hidden } #scrollDiv div { height:25px; padding-left:10px; } - 在index.js中设置JS事件
function AutoScroll(obj){ $(obj).find("div:first").animate({ marginTop:"-25px" },500,function(){ $(this).css({marginTop:"0px"}).find("div:first").appendTo(this); }); } $(document).ready(function(){ setInterval('AutoScroll("#scrollDiv")',1000) });
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17