广树
2024-10-10 19:57
@铭心:谢谢大佬夸奖,大佬的博客也很可爱。
关于友链,抱歉,希望能仔细阅读一下友链要求。
作者:广树时间:2016-02-12 21:08:37分类:JavaScript/jQuery/Vue
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>