亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2015年11月11日 10:52:42   投稿:lijiao  
這篇文章主要介紹了js文字橫向滾動(dòng)特效,實(shí)現(xiàn)過程很簡(jiǎn)單,文字在某塊區(qū)域內(nèi)橫向無間隙滾動(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)文章

  • Typescript中extends關(guān)鍵字的基本使用

    Typescript中extends關(guān)鍵字的基本使用

    extends表示具體的泛型類型只能是object類型,某個(gè)變量如果能斷言成object類型[變量as object],那么這個(gè)變量的類型符合T extends object,下面這篇文章主要給大家介紹了關(guān)于Typescript中extends關(guān)鍵字基本使用的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • js實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例

    js實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • Js+XML 操作

    Js+XML 操作

    Js+XML 操作...
    2006-09-09
  • 微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法

    微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法

    這篇文章主要介紹了微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • JavaScript JSON使用原理及注意事項(xiàng)

    JavaScript JSON使用原理及注意事項(xiàng)

    這篇文章主要介紹了JavaScript JSON使用原理及注意事項(xiàng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單

    Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單

    Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單,主要應(yīng)用場(chǎng)合有省市級(jí)關(guān)聯(lián)菜單等,感興趣的小伙伴們可以參考一下
    2016-03-03
  • JavaScript代碼里的判斷小結(jié)

    JavaScript代碼里的判斷小結(jié)

    在JavaScript代碼中,多多少少會(huì)有判斷語句。業(yè)務(wù)越復(fù)雜,邏輯就越復(fù)雜,判斷就越多。今天給大家整理下JavaScript中代碼里常會(huì)用到的那些判斷,有需要的可以參考借鑒。
    2016-08-08
  • 對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試詳解

    對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試詳解

    這篇文章主要介紹了對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果示例

    JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果示例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果,涉及javascript數(shù)值計(jì)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • 基于JavaScript實(shí)現(xiàn)新年賀卡特效

    基于JavaScript實(shí)現(xiàn)新年賀卡特效

    本文介紹了一款超級(jí)炫酷的2022新年快樂html網(wǎng)頁(yè)特效,霓虹的城市夜景和絢爛的煙花很是特別,該html頁(yè)面還有交互效果,點(diǎn)擊鼠標(biāo)就會(huì)呈現(xiàn)煙花綻放的特效。需要的可以參考一下
    2022-01-01

最新評(píng)論