實(shí)現(xiàn)網(wǎng)頁內(nèi)容水平或垂直滾動(dòng)的Javascript代碼

更新時(shí)間：2012年10月01日 19:30:38 作者：

用Javascript實(shí)現(xiàn)新聞內(nèi)容的水平或垂直滾動(dòng)，主要的優(yōu)點(diǎn)是我們可以實(shí)現(xiàn)自定義滾動(dòng)風(fēng)格或特效，應(yīng)用效果比起傳統(tǒng)的marquee更加具有特色，方法也比較簡單

主要兩個(gè)部分，一、是滾動(dòng)內(nèi)容部分；二、JS的滾動(dòng)代碼部分，也只有兩句話。

一、傳統(tǒng)的滾動(dòng)代碼

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

傳統(tǒng)的滾動(dòng)代碼應(yīng)用效果比較單一，而且經(jīng)常還存在瀏覽器的兼容性問題，比如在FIREFOX上效果就會(huì)出現(xiàn)marquee的特效無效的問題。

二、Javascript實(shí)現(xiàn)的滾動(dòng)效果

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

以上就是完整的JS滾動(dòng)代碼，如果想實(shí)現(xiàn)垂直滾動(dòng)，則只需要簡單的修改即可，即使用style的pixTop屬性即可實(shí)現(xiàn)。

摘自天緣博客

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)電子時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)電子時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
uniapp實(shí)現(xiàn)橫向滾動(dòng)選擇日期
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)橫向滾動(dòng)選擇日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
微信小程序?qū)崿F(xiàn)折疊展開效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)折疊展開效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
js實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一可操作數(shù)據(jù)庫
這篇文章主要介紹了js如何實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一操作數(shù)據(jù)庫,需要的朋友可以參考下
2014-05-05
JavaScript 實(shí)現(xiàn) Tab 點(diǎn)擊切換實(shí)例代碼
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁中，運(yùn)用的也是比較多的，包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果，在這篇博文里，我們是通過原生 JavaScript 來實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。
2017-03-03
JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)換膚功能的方法,結(jié)合實(shí)例形式分析了javascript針對頁面元素屬性與樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理
這篇文章主要介紹了詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理，引入Promise確實(shí)能夠很好的解決異步回調(diào)函數(shù)的可讀性等問題，同時(shí)也使得我們調(diào)用的時(shí)候代碼簡潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來封裝一些函數(shù)的做法
2019-03-03
javascript實(shí)現(xiàn)控制瀏覽器全屏
這篇文章主要介紹了javascript實(shí)現(xiàn)控制瀏覽器全屏的代碼分享給大家，十分的實(shí)用，有需要的小伙伴可以參考下。
2015-03-03
JS關(guān)閉窗口時(shí)產(chǎn)生的事件及用法示例
這篇文章主要介紹了JS關(guān)閉窗口時(shí)產(chǎn)生的事件及用法,結(jié)合關(guān)閉窗口時(shí)提交評論的實(shí)例分析了javascript事件觸發(fā)機(jī)制及遮罩層實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-08-08
BootStrap下的彈出框加載select2框架失敗的解決方法
本文通過簡單的代碼給大家介紹了BootStrap下的彈出框加載select2框架失敗的解決方法，需要的朋友參考下吧
2017-08-08