新闻向下翻滚更新

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>新闻向下翻滚更新</title> <link href="http://cdn.bootcss.com/meyer-reset/2.0/reset.min.css" rel="stylesheet"> <style type="text/css"> /* CSS Document create by happy @2016-06-16 15:32 */ body{background:#EEF2F7;font-family: 'Microsoft Yahei','\5FAE\8F6F\96C5\9ED1','Hiragino Sans GB','\5B8B\4F53',Arial;} .fg-box{position:relative; width:330px; height:400px; margin:100px auto; background:#fff; padding:20px 20px 28px;} .fg-line{position: absolute; height: 70%; width: 2px; background: #E5EBF0; left: 50px; top: 42px;} .fg-box dl{max-height: 360px; overflow: hidden; position: relative;} .fg-box dl dd{max-height: 360px; overflow: hidden; position: relative; height:52px; padding:10px 0 10px 80px;} .fg-left{padding: 5px 0; position: absolute; background: #FFF; top: 20px; left: 0;} .fg-left span{display: inline-block; background-color: #e5ebf0; -webkit-border-radius: 5px; border-radius: 5px; color: #a3b5c8; width: 60px; line-height: 20px; text-align: center; overflow: hidden;} .fg-right{position: absolute; top: 10px; left:90px;} .fg-right h4{font-size:16px; line-height:38px; color:#46525e; font-weight:normal;} .fg-right a{font-size:12px; line-height:16px; color:#a3b5c8;} .fg-right a:hover{color:red;} </style> </head> <body> <div class="fg-box" id="box"> <div class="fg-line"></div> <dl> <dd> <div class="fg-left"><span>2小时前</span></div> <div class="fg-right"> <h4>李**购了10元</h4> <a href="#">银亿1号0617040</a> </div> </dd> <dd> <div class="fg-left"><span>2小时前</span></div> <div class="fg-right"> <h4>李**购了20元</h4> <a href="#">银亿1号0617040</a> </div> </dd> <dd> <div class="fg-left"><span>2小时前</span></div> <div class="fg-right"> <h4>李**购了30元</h4> <a href="#">银亿1号0617040</a> </div> </dd> <dd> <div class="fg-left"><span>3小时前</span></div> <div class="fg-right"> <h4>李**购了40元</h4> <a href="#">银亿1号0617040</a> </div> </dd> <dd> <div class="fg-left"><span>4小时前</span></div> <div class="fg-right"> <h4>李**购了50元</h4> <a href="#">银亿1号0617040</a> </div> </dd> <dd> <div class="fg-left"><span>4小时前</span></div> <div class="fg-right"> <h4>李**购了60元</h4> <a href="#">银亿1号0617040</a> </div> </dd> </dl> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> // JavaScript Document var _box =$('#box'); var _interval=3000; //刷新间隔时间3秒 function gdb(){ $("<dd style='height:0px;'><div class='fg-left'><span>1小时前</span></div><div class='fg-right'><h4>王**购了60元</h4><a href='#'>银亿1号0617040</a></div></dd>").prependTo('#box dl'); var _first=$('#box dl dd:first'); _first.animate({height: '+53px'}, "slow"); var _last=$('#box dl dd:last'); _last.remove(); setTimeout(function(){ gdb(); },_interval); }; gdb(); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 新闻向下翻滚更新