js文字横向滚动特效
本文为大家分享了js文字横向滚动特效代码,具体实现内容如下:
页面布局
<divid="scroll_div"class="fl"> <divid="scroll_begin"> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得<spanclass="pad_right">50元巨人点卡奖励</span> </div> <divid="scroll_end"></div> </div>
样式:
.pad_right{padding-right:2em;} #scroll_div{height:26px;overflow:hidden;white-space:nowrap;width:535px;margin-left:10px;} #scroll_begin,#scroll_end{display:inline;}
js代码:
//文字横向滚动 functionScrollImgLeft(){ varspeed=50; varMyMar=null; varscroll_begin=document.getElementById("scroll_begin"); varscroll_end=document.getElementById("scroll_end"); varscroll_div=document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML; functionMarquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth; else scroll_div.scrollLeft++; } MyMar=setInterval(Marquee,speed); scroll_div.onmouseover=function(){ clearInterval(MyMar); } scroll_div.onmouseout=function(){ MyMar=setInterval(Marquee,speed); } } ScrollImgLeft();
以上就是轻松实现js文字横向滚动特效,大家可以在自己的网页中添加js文字横向滚动特效。