写在前面:360急速模式下scrollTop 和 scrollHeight 会有不兼容,此时需要给滚动的元素的相对根元素加 position:relative 定位,例如:给 html或者 ul1 或者 ul2 加
html
<div class="exponent_box">
<div class="exponent_box_title">
<span>环境指数</span>
</div>
<div style="width: 100%;">
<div class="realTimeData_head">城区环境空气质量实时数据</div>
<ul class="realTimeData_head_ul">
<li>监测点位</li>
<li>AQI</li>
<li>PM2.5</li>
<li>PM10</li>
<li>NO<span style="vertical-align: sub;">2</span></li>
<li>SO<span style="vertical-align: sub;">2</span></li>
<li>CO</li>
<li>O<span style="vertical-align: sub;">3</span></li>
</ul>
</div>
<div id="realTimeData_box">
<ul id="comment1">
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
<li>
<span>监测点位</span>
<span>39</span>
<span>19</span>
<span>40</span>
<span>25</span>
<span>6</span>
<span>0.9</span>
<span>28</span>
</li>
</ul>
<ul id="comment2"></ul>
</div>
</div>
css
.exponent_box {width: 680px;height: 289px;float: left;}
.exponent_box_title {width: 100%;height: 38px;line-height: 38px;background: #eef6fd;border: 1px solid #e5f2fe;}
.exponent_box_title span {display: block;width: 100px;color: #357fd0;font-size: 16px;border-top: 2px solid #357fd0;text-align: center;font-weight: bold;}
.realTimeData_head {width: 100%;margin: 0 auto;height: 40px;color: #000000;text-align: center;line-height: 40px;font-size: 14px;font-weight: bold;letter-spacing: 1px;}
.realTimeData_head_ul {border-bottom: 1px solid #ddd;width: 680px;padding: 0;background: #E0F0FF;margin: 0 auto;}
.realTimeData_head_ul li {
background: #eef6fd;
padding: 6px 0;
width: 85px;
font-weight: bold;
float: left;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;
}
#realTimeData_box {
width: 100%;
height: 190px;
overflow: hidden;
margin: 0 auto;
text-align: center;
}
#comment1,realTimeData_box {
position:relative;
}
#comment1 li span,#comment2 li span{
width: 85px;
float: left;
height: 32px;
font-size: 14px;
text-align: center;
line-height: 30px;
color: #737373;
border-bottom: 1px solid #eef6fd;
}
JS
window.onload = roll(50);
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("realTimeData_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseover = function () {
clearInterval(timer);
};
// 鼠标移出div后继续滚动
ulbox.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}
// 开始滚动函数
function rollStart() {
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("realTimeData_box");
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
}