实现上下滚动的跑马灯效果, 代码如下:
var scroll = function() {
//选择列表中的第一个元素
var elem = document.querySelectorAll('.infolist li')[0];
//记录其高度
var height = elem.offsetHeight;
setTimeout(function callMeAnony() {
//如果高度不为0
if(height){
//减少元素的高度以便让后面的元素顶上来, 同时再设定一个Timeout直到元素的高度为0
height -= 3;
elem.style.height = height + 'px';
setTimeout(callMeAnony, 200);
}else{
//如果元素的高度已经为0, 则将元素挪到最后一位并恢复原来的高度
elem.parentNode.appendChild(elem);
elem.style.height = elem.previousElementSibling.offsetHeight + 'px';
}
}, 200);
};
//每3秒执行一次
setInterval(scroll, 3000);
这段代码在电脑上执行得很好, 但在手机端就出问题了。 在微信里动画只在3秒后执行了一次就停在那里了。求解!
已解决, 其原因是if(height){
这段
在PC端height是30, 但在手机端就不一定了。由于height以3递减, 这会导致height直接跳过height=0
, 一直执行下去
解决方案很简单, if(height >= 0){
既可.
你看一下是不是 callmeXXXX那个函数出了问题
写成
setInterval('scroll()',3000);
试试