Javascript特效之向左滾動的廣告

Javascript特效之向左滾動的廣告

今天來看看怎麼實現從右向左無縫滾動的文字廣告效果。

效果圖：

文字會一直向左重複滾動，直到鼠標放上去才停止。

實現思路：

因爲是要向左移動，所以使用scrollLeft方法控制元素向左移動。需要寫一個重複執行的代碼來控制元素一直向左移動，這裏用到setInterval。

說到setInterval這裏說說setInterval和settimeout的區別。settimeout只執行一次後就停止，而setInterval會一直執行，直到調用執行的返回值給clearInterval纔會停止執行。

js代碼：

var s,s2,s3,s4,timer;
function init(){
s=getid("div1");
s2=getid("div2");
s3=getid("div3");
s4=getid("scroll");
s4.style.width=(s2.offsetWidth*2+100)+"px";
s3.innerHTML=s2.innerHTML;
timer=setInterval(mar,30)
}
function mar(){
if(s2.offsetWidth<=s.scrollLeft){
s.scrollLeft-=s2.offsetWidth;
}else{s.scrollLeft++;}
}
function getid(id){
return document.getElementById(id);
}
window.οnlοad=init;

offsetwidth:取物體寬度的數值。值得注意的是，offsetwidth需算上border +padding。是取盒模型。