js文字橫向滾動(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)特效。
- js實(shí)現(xiàn)的文字橫向無間斷滾動(dòng)
- 淺析js 文字滾動(dòng)效果
- JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法
- js實(shí)現(xiàn)文字滾動(dòng)效果
- JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
- js 上下文字滾動(dòng)效果
- 原生JS實(shí)現(xiàn)旋轉(zhuǎn)輪播圖+文字內(nèi)容切換效果【附源碼】
- js實(shí)現(xiàn)文字向上輪播功能
- JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼
- JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果
相關(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-08js實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)彈窗居中的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法
這篇文章主要介紹了微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04JavaScript JSON使用原理及注意事項(xiàng)
這篇文章主要介紹了JavaScript JSON使用原理及注意事項(xiàng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單,主要應(yīng)用場(chǎng)合有省市級(jí)關(guān)聯(lián)菜單等,感興趣的小伙伴們可以參考一下2016-03-03對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試詳解
這篇文章主要介紹了對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JavaScript實(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)新年賀卡特效
本文介紹了一款超級(jí)炫酷的2022新年快樂html網(wǎng)頁(yè)特效,霓虹的城市夜景和絢爛的煙花很是特別,該html頁(yè)面還有交互效果,點(diǎn)擊鼠標(biāo)就會(huì)呈現(xiàn)煙花綻放的特效。需要的可以參考一下2022-01-01