滚动条（附：定时调用）

Posted 2020-11-01 高木子

CSS:

.rank{ width:88%;float:right;margin-left: 50px; height:50px; line-height:50px;  overflow:hidden; white-space:nowrap;position:absolute;}
.rank .rank_body{width:auto;font-size:16px; position: absolute; top:0; left:0; }

html:

<div class="rank" id="rank" onmouseover="clearInterval(timerRank)" onmouseout="timerRank=setInterval(mar,50)">
    <span class="rank_body" id="rank_body"></span>
</div>

JS：

//页面初始化
$(function(){
    //滚动条
    init();
}
 //滚动条
function init(){
　　 //第二个参数即 50 代表滚动速度
    timerRank=setInterval(mar,50);
}
function mar(){
  var dp=$(‘#rank‘),d=$(‘#rank_body‘),l=d.position().left;
    if(Math.abs(l)<d.width()){
       d.css(‘left‘,l-1);
    }else{
       d.css(‘left‘,0);
    }
}

 

附：定时调用

//页面初始化：
$(function(){
　　refreshData();
}

//定时调用
function refreshData(){
    //ajax方法
    ajaxWarnRank();
　　 //五分钟调用一次
    setTimeout(refreshData,300000);
}