分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果，僅3行代碼
更新時間：2011年09月21日 00:20:23 作者：
這是本人2007年進行的一項研究，當(dāng)時網(wǎng)絡(luò)上沒有什么既精簡又實用的循環(huán)滾動代碼，所以就自己琢磨了段時間，最終找到這個辦法
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果</TITLE>
</HEAD>
<BODY>
用marquee實現(xiàn)首尾相連循環(huán)滾動效果（僅IE）：<br /><br />
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on">這里是要滾動的內(nèi)容</SPAN></MARQUEE>
<br /><br />用DIV+javascript實現(xiàn)首尾相連循環(huán)滾動效果（兼容firefox）：<br /><br />
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"><span>這里是要滾動的內(nèi)容</span></DIV>
<script language="javascript" type="text/javascript">
<!--
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//當(dāng)滾動條到達(dá)右邊頂端時
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
//當(dāng)滾動條滾動了初始內(nèi)容的寬度時滾動條回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>
您可能感興趣的文章:
- JS與HTML結(jié)合使用marquee標(biāo)簽實現(xiàn)無縫滾動效果代碼
- JQuery插件Marquee.js實現(xiàn)無縫滾動效果
- div+css+js實現(xiàn)無縫滾動類似marquee無縫滾動兼容firefox
- js實現(xiàn)的類marquee水平循環(huán)滾動
- javascript 模擬Marquee文字向左均勻滾動代碼
- Class Of Marquee Scroll通用不間斷滾動JS封裝類
- 用javascript實現(xiàn)代替marquee的滾動字幕效果代碼
- 用javascript代替marquee的滾動字幕效果代碼
- 再次更新！MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類 Ver 1.6)
- JS實現(xiàn)無縫循環(huán)marquee滾動效果
相關(guān)文章
簡單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換
這篇文章主要介紹了簡單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS實現(xiàn)常見的查找、排序、去重算法,結(jié)合實例形式總結(jié)分析了JavaScript線性查找、二分查找、遞歸查找、數(shù)組去重、冒泡拍戲、快速排序?qū)崿F(xiàn)技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS上傳圖片預(yù)覽插件制作（兼容到IE6）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了js父頁面與子頁面不同時顯示的方法,打開一個頁面后,父頁面DISABLE,在子頁面關(guān)閉后,父頁面ENABLE,是比較實用的技巧,需要的朋友可以參考下2014-10-10
本篇文章是對瀑布流局部的實現(xiàn)進行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
分享js粘帖屏幕截圖到web頁面插件screenshot-paste
這篇文章主要為大家分享了js粘帖屏幕截圖到web頁面插件screenshot-paste的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JS簡單獲取當(dāng)前日期和農(nóng)歷日期的方法
這篇文章主要介紹了JS簡單獲取當(dāng)前日期和農(nóng)歷日期的方法,涉及javascript日期運算與字符串轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了js判斷字符長度及中英文數(shù)字等,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序App生命周期的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了JavaScript?編寫枚舉的最有效方法分享，JavaScript語言本身不支持枚舉。如果我們想模擬枚舉，我們可以使用一個對象。更多相關(guān)內(nèi)容感興趣的小伙伴可以參考一下2022-06-06