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。是取盒模型。