jquery新闻标题向上无缝滚动第1种写法
这是第1种写法，代码里有详细解释：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #xw{ width: 500px; height: 40px; margin: 300px auto; border: 2px solid darkblue; position: relative; overflow: hidden; } #xw ul{ position: absolute; top: 0; left: 0; } #xw ul li{ list-style: none; width: 500px; height: 40px; line-height: 40px; text-align: center; color: white; } </style> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 大总管变量 var t = 0; // 设置定时器,让ul每隔一秒钟滑动一次 setInterval(function(){ t++; if (t==7) { $('#xw ul').css({'top':'0px'}); t=1; } // 计算ul应该到达的top值 var y = t*-40; // 让ul滑动上去 $('#xw ul').animate({'top':y+'px'},500) },1000) }) </script> </head> <body> <div id="xw"> <ul> <li style="background: darkblue;">为什么俄罗斯姑娘结婚后身材迅速发福？涨知识了</li> <li style="background: darkcyan;">男子在海里泡太久 感觉手臂有东西 上岸后惊到众人</li> <li style="background: darkgoldenrod;">90后多少存款算合格？ 看了网友们回答不敢说话了</li> <li style="background: darkgreen;">23岁女子花1万5做腿部吸脂术 半年后腿上全是坑</li> <li style="background: darkmagenta;">那些老公身价过千万的女人，到底是长什么样的？</li> <li style="background: red;">穿搭技巧：有时候我们的颜色搭配要比款式更重要！</li> <li style="background: darkblue;">为什么俄罗斯姑娘结婚后身材迅速发福？涨知识了</li> </ul> </div> </body> </html> 上面代码效果图（效果图片做得不好，没有向上滚动的效果，实际上代码是有向上滚动效果的）：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知