欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js文字橫向滾動特效

 更新時間:2015年11月11日 10:52:42   投稿:lijiao  
這篇文章主要介紹了js文字橫向滾動特效,實現(xiàn)過程很簡單,文字在某塊區(qū)域內橫向無間隙滾動,感興趣的小伙伴們可以參考一下

本文為大家分享了js文字橫向滾動特效代碼,具體實現(xiàn)內容如下:

頁面布局 

<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();

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

相關文章

  • Typescript中extends關鍵字的基本使用

    Typescript中extends關鍵字的基本使用

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

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

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

    Js+XML 操作

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

    微信小程序配置服務器提示驗證token失敗的解決方法

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

    JavaScript JSON使用原理及注意事項

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

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

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

    JavaScript代碼里的判斷小結

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

    對于防止按鈕重復點擊的嘗試詳解

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

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

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

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

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

最新評論