| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery文字逐行向上滚动代码 - 站长素材</title> | |
| <link href="css/index.css" rel="stylesheet" type="text/css"> | |
| <script src="js/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- -------------摇奖排行榜--------------- --> | |
| <div class="Top_Record"> | |
| <div class="record_Top"><p>摇奖排行榜</p></div> | |
| <div class="topRec_List"> | |
| <dl> | |
| <dd>编号</dd> | |
| <dd>姓名</dd> | |
| <dd>奖项</dd> | |
| <dd>时间</dd> | |
| </dl> | |
| <div class="maquee"> | |
| <ul> | |
| <li> | |
| <div>1</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>2</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>3</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>4</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>5</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>6</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>7</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| <li> | |
| <div>8</div> | |
| <div>王**</div> | |
| <div>中了30元</div> | |
| <div>2014/12/30 14:20</div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="apple"> | |
| <ul> | |
| <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> | |
| <li><a href="#" target="_blank">怎么爱你都不嫌多</a></li> | |
| <li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li> | |
| <li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li> | |
| <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> | |
| <li><a href="#" target="_blank">就像天边最美的云朵</a></li> | |
| <li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li> | |
| <li><a href="#" target="_blank">种下希望就会收获</a></li> | |
| </ul> | |
| </div> | |
| <script type="text/javascript"> | |
| function autoScroll(obj){ | |
| $(obj).find("ul").animate({ | |
| marginTop : "-39px" | |
| },500,function(){ | |
| $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); | |
| }) | |
| } | |
| $(function(){ | |
| setInterval('autoScroll(".maquee")',3000); | |
| setInterval('autoScroll(".apple")',2000); | |
| }) | |
| </script> | |
| <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> | |
| <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> | |
| <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p> | |
| </div> | |
| </body> | |
| </html> | |
相关文章：