效果"/>
文字滚动效果
需要引入jQuery
HTML
<!doctype html><html><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=(device-dpi)/2" /><title>文字滚动</title><link href="css/index.css" rel="stylesheet" type="text/css"><script src=".9.1/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><!-- 最好不要用 marquee标签 -->
<div class="aa"><marquee direction="left">求赞求评论求好评球动力啊~~~ 抽空整理需要很大的耐心的= = 让我继续有无偿奉献(免jq币下载)的动力→_→</marquee></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> </body></html>CSS
@charset "utf-8";
/* author lyc */*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }
li{ list-style:none }
img{ border:none}
a{ color:#fff; display:block; text-decoration:none;}body{}/* -------------------------摇奖排行榜----------------------------------- */
.Top_Record{}.record_Top{width:90%; height:50px; background:url(../images/record_Bg.png) center center no-repeat; background-size:contain; text-align:center; line-height:50px; margin:30px auto 0px; color:#fff;}.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div{ float:left;}
.topRec_List li div:nth-child(1){ width:17%;}
.topRec_List li div:nth-child(2){ width:18%;}
.topRec_List li div:nth-child(3){ width:25%;}
.topRec_List li div:nth-child(4){ width:40%;}.apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
.apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
.aa {word-wrap:break-word;line-height:50px; color:#1B96EE;}
更多推荐
文字滚动效果
发布评论