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文字横向滚动特效。
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下