导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-05-07 21:00
@ZeroCounter:哈哈哈,被发现啦
ZeroCounter
2025-05-07 14:06
原来博主是可爱的二次元女孩子(→游船上那张全景
广树管理员
2025-05-06 14:31
@ZeroCounter:这样啊,逐渐听不懂现在的网络热梗了😅
ZeroCounter
2025-05-06 13:41
@广树:一个梗啦,表示很无语( 因为国内的阅读理解题经常写表达了作者的思乡之情(
广树管理员
2025-05-06 11:13
@ModerRAS:云台拍摄全景需要固定不动,时间也长,有一定场景限制。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月15天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

【jQuery】文字轮流滚动播放

作者:广树时间:2016-02-12 21:08:37分类:JavaScript

CSS部分:

#mobile4{width:auto;height:60px;overflow:hidden;cursor: pointer;font-size:12px!important;}
#mobile4 a{color:#000;}
#mobile4 .wtleft{ width:75px;float:left;}
#mobile4 .wtname{width:100%;float:left; margin-top:8px; height:20px;}
#mobile4 .order{width:100%;float:left; margin-top:3px; height:20px;}
#mobile4 .wt{width:112px;float:left;margin-top:5px }
#mobile4 .wtpic{line-height:48px;height:48px;width:48px;float:left;}
#mobile4 .wt1{width:64px; float:left;}
#mobile4 .wtline{width:100%;float:left; height:18px; line-height:18px;margin-top:3px;}
.mobile04{width:100%;font-size:12px;height:24px;overflow:hidden;}
.mobile04 ul{list-style-type:none;margin:0;padding:0;}
.mobile04 ul li{height:25px;line-height:25px;float:left;display:inline;width:100%; overflow:hidden;}
.mobile04 .f1{ background:#54A932; color:#fff; line-height:12px; padding:1px 2px 2px;}
.mobile04 ul li span{padding-left:5px;}



html部分:


<div class="mobile04" id="myscroll">
  <ul>
    <li>
            <span>2015-07-02</span> 
            <span>温州</span> 
            <span class="img04">
            <img class='pngtqico' align='absmiddle' src='http://img.tianqi.com/static/images/tianqi/b0.png' style='border:0;width:20px;height:20px'/>
            </span> 
            <span style="padding-left:0px;">晴</span> 
            <font style="color:#4899be;">12℃</font>~
            <font style="color:#f00;">4℃</font>      
    </li>
    <li>
            <span>2015-07-02</span> 
            <span>温州</span> 
            <span class="img04">
            <img class='pngtqico' align='absmiddle' src='http://img.tianqi.com/static/images/tianqi/b0.png' style='border:0;width:20px;height:20px'/>
            </span> 
            <span style="padding-left:0px;" id="tenki">晴</span> 
            <font style="color:#4899be;">22℃</font>~
            <font style="color:#f00;">4℃</font>      
    </li>
    <li>
            <span>2015-07-02</span> 
            <span>温州</span> 
            <span class="img04">
            <img class='pngtqico' align='absmiddle' src='http://img.tianqi.com/static/images/tianqi/b0.png' style='border:0;width:20px;height:20px'/>
            </span> 
            <span style="padding-left:0px;" id="tenki">晴</span> 
            <font style="color:#4899be;">32℃</font>~
            <font style="color:#f00;">4℃</font>      
    </li>
    <li>
            <span>2015-07-02</span> 
            <span>温州</span> 
            <span class="img04">
            <img class='pngtqico' align='absmiddle' src='http://img.tianqi.com/static/images/tianqi/b0.png' style='border:0;width:20px;height:20px'/>
            </span> 
            <span style="padding-left:0px;" id="tenki">晴</span> 
            <font style="color:#4899be;">42℃</font>~
            <font style="color:#f00;">4℃</font>      
    </li>
    <li>
            <span>2015-07-02</span> 
            <span>温州</span> 
            <span class="img04">
            <img class='pngtqico' align='absmiddle' src='http://img.tianqi.com/static/images/tianqi/b0.png' style='border:0;width:20px;height:20px'/>
            </span> 
            <span style="padding-left:0px;" id="tenki">晴</span> 
            <font style="color:#4899be;">12℃</font>~
            <font style="color:#f00;">4℃</font>      
    </li>
 </ul>
</div>



js部分:


<script type="text/javascript">
function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"/*根据一条的实际高度*/
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
	li_num = $('#myscroll ul li').length
	tenki_speed = 2000 //滚动速度
	if(li_num > 1){
setInterval('AutoScroll("#myscroll")',tenki_speed)
	}
});
</script>

donate.png

1210 x 50(蓝底).png

cloudcone