JS 跑馬燈效果實現
阿新 • • 發佈:2019-01-06
html部分 <div class="box8"> <div class="t_news"> <ul class="news_li"> <li><a href="javascript:;">蘋果8降價</a></li> <li><a href="javascript:;">蘋果7降價</a></li> <li><a href="javascript:;">蘋果6降價</a></li> <li><a href="javascript:;">蘋果5降價</a></li> <li><a href="javascript:;">蘋果4降價</a></li> <li><a href="javascript:;">蘋果X降價</a></li> </ul> <ul class="swap"></ul> </div> </div> css部分 *{ margin: 0; padding: 0; font-size: 12px; } a{ text-decoration: none; } ul,li{ list-style: none; } .box8{ height: 35px; background: #000; overflow: hidden; } .t_news{ height: 19px; color: #fff; padding-left: 10px; margin: 8px 0; overflow: hidden; position: relative; } .news_li,.swap{ line-height: 19px; font-weight: bold; display: inline-block; position: absolute; top: 0; left: 72px; } .news_li a,.swap a{ color: #fff; } .swap{ top: 19px; } js部分 function Textrolling(){ t = parseInt(x.css('top')); y.css('top','19px'); x.animate({ top:t-19 + 'px' },'slow');//19為每個li的高度 if(Math.abs(t) == h-19){//19為每個li的高度 y.animate({ top:'0px' },'slow'); z=x; x=y; y=z; } setTimeout(Textrolling,3000);//滾動間隔時間 現在是3秒 } $(document).ready(function(){ $('.swap').html($('.news_li').html()); x = $('.news_li'); y = $('.swap'); h = $('.news_li li').length * 19;//19為每個li的高度 setTimeout(Textrolling,3000);//滾動間隔時間 現在是3秒 })