AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

js文字横向滚动特效

51自学网 http://www.wanshiok.com
js文字横向滚动,js文字滚动特效,js横向滚动,js文字横向滚动代码,js文字横向无缝滚动

本文为大家分享了js文字横向滚动特效代码,具体实现内容如下:

页面布局 

<div id="scroll_div" class="fl">   <div id="scroll_begin">   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>   恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>  </div>   <div id="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代码:

//文字横向滚动function ScrollImgLeft(){  var speed=50;  var MyMar = null; var scroll_begin = document.getElementById("scroll_begin");  var scroll_end = document.getElementById("scroll_end");  var scroll_div = document.getElementById("scroll_div");  scroll_end.innerHTML=scroll_begin.innerHTML;  function Marquee(){   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文字横向滚动特效。


js文字横向滚动,js文字滚动特效,js横向滚动,js文字横向滚动代码,js文字横向无缝滚动  
上一篇:九种原生js动画效果  下一篇:详解javascript遍历方式