Javascript特效之向左滾動的廣告

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

效果圖：

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

實現思路：

因為是要向左移動，所以使用scrollLeft方法控制元素向左移動。需要寫一個重復執(zhí)行的代碼來控制元素一直向左移動，這里用到setInterval。

說到setInterval這里說說setInterval和settimeout的區(qū)別。settimeout只執(zhí)行一次后就停止，而setInterval會一直執(zhí)行，直到調用執(zhí)行的返回值給clearInterval才會停止執(zhí)行。

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

總結

以上是生活随笔為你收集整理的Javascript特效之向左滚动的广告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。