就是一个无缝滚动的效果,有点不同的是滚动面板的宽度是不确定的,设置的是百分比。
我是完全弄不明白这是为什么,alert一下改变了什么呢?
代码如下:
$(function(){
setTipWidth();
beginScroll();
})
var scrDiv = null;
var dept = 5;
var mval = 0;
var setTipWidth = function() {
scrDiv = document.getElementById("tipScroller");
var tipContent = document.getElementById("tipContent");
scrDiv.scrollLeft = 0;
if (tipContent.offsetWidth + 17 < scrDiv.offsetWidth) return;
tipContent.innerHTML += tipContent.innerHTML;
var nw = getOffsetWidth("tipContent"); //确认内容的宽度。百分比的话内容超长就会挤到下一行,这个函数返回如果内容都在同一行时div的宽度。
alert(''); //就这句话,如果不alert一下,那么内容就只会动一下就不动了,不知道为什么。alert了的话就一切正常。
tipContent.style.width = nw + "px";
mval = nw / 2;
}
var beginScroll = function() {
if (scrollTime != null) return;
scrollTime = setInterval(function() {
if (scrDiv.scrollLeft == mval) {
scrDiv.scrollLeft = 0;
}
else if (scrDiv.scrollLeft + dept > mval) {
scrDiv.scrollLeft = scrDiv.scrollLeft + (mval - scrDiv.scrollLeft);
}
else {
scrDiv.scrollLeft += dept;
}
}, 100);
}