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