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文字横向滚动特效。