快捷導(dǎo)航

js文字橫向滾動(dòng)特效

更新時(shí)間：2015年11月11日 10:52:42 投稿：lijiao

這篇文章主要介紹了js文字橫向滾動(dòng)特效，實(shí)現(xiàn)過(guò)程很簡(jiǎn)單，文字在某塊區(qū)域內(nèi)橫向無(wú)間隙滾動(dòng)，感興趣的小伙伴們可以參考一下

本文為大家分享了js文字橫向滾動(dòng)特效代碼，具體實(shí)現(xiàn)內(nèi)容如下：

頁(yè)面布局

<div id="scroll_div" class="fl"> 
  <div id="scroll_begin">
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</span>
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</span>
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</span>
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</span>
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</span>
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</span>
   恭喜793765***獲得 <span class="pad_right">50元巨人點(diǎn)卡獎(jiǎng)勵(lì)</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代碼：

//文字橫向滾動(dòng)
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();

以上就是輕松實(shí)現(xiàn)js文字橫向滾動(dòng)特效，大家可以在自己的網(wǎng)頁(yè)中添加js文字橫向滾動(dòng)特效。

您可能感興趣的文章:

相關(guān)文章

聊一聊JS中的prototype
function定義的對(duì)象有一個(gè)prototype屬性，prototype屬性又指向了一個(gè)prototype對(duì)象，注意prototype屬性與prototype對(duì)象是兩個(gè)不同的東西，要注意區(qū)別.這篇文章主要介紹了JS中的prototype的相關(guān)資料,需要的朋友可以參考下
2016-09-09
數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實(shí)現(xiàn))
下面小編就為大家?guī)?lái)一篇數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
JavaScript中的值類型詳細(xì)介紹
這篇文章主要介紹了JavaScript中的值類型詳細(xì)介紹,本文講解了Primitive、Object、JS自帶全局對(duì)象、Immutable與Mutable等內(nèi)容,需要的朋友可以參考下
2014-12-12
JS是否可以跨文件同時(shí)控制多個(gè)iframe頁(yè)面的應(yīng)用技巧
這篇文章給大家詳細(xì)介紹了JS是否可以跨文件同時(shí)控制多個(gè)iframe頁(yè)面的應(yīng)用技巧，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2007-12-12
js實(shí)現(xiàn)iframe自動(dòng)自適應(yīng)高度的方法
這篇文章主要介紹了js實(shí)現(xiàn)iframe自動(dòng)自適應(yīng)高度的方法,涉及javascript操作iframe框架的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
微信小程序獲取用戶信息并保存登錄狀態(tài)詳解
這篇文章主要介紹了微信小程序獲取用戶信息并保存登錄狀態(tài)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JS簡(jiǎn)單獲取當(dāng)前日期時(shí)間的方法(如：2017-03-29 11:41:10 星期四)
這篇文章主要介紹了JS簡(jiǎn)單獲取當(dāng)前日期時(shí)間的方法,涉及javascript針對(duì)當(dāng)前日期時(shí)間的簡(jiǎn)單運(yùn)算操作,需要的朋友可以參考下
2017-03-03
淺談webpack下的AOP式無(wú)侵入注入
下面小編就為大家?guī)?lái)一篇淺談webpack下的AOP式無(wú)侵入注入。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
B/S開(kāi)發(fā)中常用javaScript技術(shù)與代碼
B/S開(kāi)發(fā)中常用javaScript技術(shù)與代碼...
2007-03-03
微信小程序使用websocket通訊的demo，含前后端代碼，親測(cè)可用
這篇文章主要介紹了微信小程序使用websocket通訊的demo，含前后端代碼，親測(cè)可用,需要的朋友可以參考下
2019-05-05