js實(shí)現(xiàn)的文字橫向無(wú)間斷滾動(dòng)
更新時(shí)間：2010年12月30日 19:24:56 作者：
要實(shí)現(xiàn)這樣一個(gè)功能，文字在某塊區(qū)域內(nèi)橫向無(wú)間隙滾動(dòng)。
我一開(kāi)始想到的標(biāo)簽是<marquee>，因?yàn)樗梢詫?shí)現(xiàn)橫向滾動(dòng)。經(jīng)理說(shuō)它的起始位置從最右邊出來(lái)的，能不能將它改成從中間出來(lái)，或者從最左邊出來(lái)也行。查了相關(guān)資料，才知道<marquee>無(wú)法指定起始位置。后來(lái)在網(wǎng)上找到一段代碼，它是用圖片來(lái)實(shí)現(xiàn)的，我將圖片改成文字之后，順利地實(shí)現(xiàn)了我所想要的功能。代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這里${affiche.content}是從數(shù)據(jù)庫(kù)取出來(lái)的文字。
之所以在scroll_begin的div里面寫這個(gè)多重復(fù)的文字，是因?yàn)檫@些文字的長(zhǎng)度必須要大于scroll_div的div容器。如果小于div容易，則不會(huì)有一直滾動(dòng)的效果。
換句話說(shuō)：無(wú)縫滾動(dòng)的內(nèi)容寬度加起來(lái)必須要大于容器的寬度。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這里${affiche.content}是從數(shù)據(jù)庫(kù)取出來(lái)的文字。
之所以在scroll_begin的div里面寫這個(gè)多重復(fù)的文字，是因?yàn)檫@些文字的長(zhǎng)度必須要大于scroll_div的div容器。如果小于div容易，則不會(huì)有一直滾動(dòng)的效果。
換句話說(shuō)：無(wú)縫滾動(dòng)的內(nèi)容寬度加起來(lái)必須要大于容器的寬度。
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- 判斷滾動(dòng)條到底部的JS代碼
- js操作滾動(dòng)條事件實(shí)例
- 徹底搞懂JS無(wú)縫滾動(dòng)代碼
- js獲取滾動(dòng)距離的方法
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- 淺析js 文字滾動(dòng)效果
- js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁(yè)面底部繼續(xù)加載
- 原生JS實(shí)現(xiàn)目錄滾動(dòng)特效
相關(guān)文章
js驗(yàn)證表單第二部分...2006-11-11
這篇文章主要給大家介紹了關(guān)于es6中比較有用的7個(gè)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
13個(gè)簡(jiǎn)單的代碼優(yōu)化方法，可以讓你的代碼在 Chrome 的 V8 JavaScript 引擎編譯/運(yùn)行你的 JavaScript 代碼更加快速2012-07-07
基于jstree使用AJAX請(qǐng)求獲取數(shù)據(jù)形成樹(shù)
這篇文章主要為大家詳細(xì)介紹了基于jstree使用AJAX請(qǐng)求獲取數(shù)據(jù)形成樹(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript中異步與回調(diào)的基本概念及回調(diào)地獄現(xiàn)象
這篇文章主要介紹了JavaScript中異步與回調(diào)的基本概念，以及回調(diào)地獄現(xiàn)象,本文主要介紹了異步和回調(diào)的基本概念，二者是JavaScript的核心內(nèi)容，需要所有熱愛(ài)JS的小伙伴深入了解，需要的朋友可以參考下2022-07-07
underscore之Chaining_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
本文通過(guò)文字說(shuō)明與代碼的形式給大家介紹了underscore之Chaining的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-07-07
ionic 上拉菜單(ActionSheet)實(shí)例代碼
ionic js 上拉菜單(ActionSheet)通過(guò)往上彈出的框，來(lái)讓用戶選擇選項(xiàng)；點(diǎn)擊取消按鈕或者點(diǎn)擊空白的地方來(lái)讓它消失。本文給大家分享實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2016-06-06
克隆javascript對(duì)象的三個(gè)方法小結(jié)
克隆javascript對(duì)象的三個(gè)方法整理，需要的朋友可以參考下。2011-01-01
基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之wxs使用教程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05