分別用marquee和div+js實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果,僅3行代碼
更新時(shí)間:2011年09月21日 00:20:23 作者:
這是本人2007年進(jìn)行的一項(xiàng)研究,當(dāng)時(shí)網(wǎng)絡(luò)上沒(méi)有什么既精簡(jiǎn)又實(shí)用的循環(huán)滾動(dòng)代碼,所以就自己琢磨了段時(shí)間,最終找到這個(gè)辦法
復(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實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果</TITLE>
</HEAD>
<BODY>
用marquee實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果(僅IE):<br /><br />
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on">這里是要滾動(dòng)的內(nèi)容</SPAN></MARQUEE>
<br /><br />用DIV+javascript實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果(兼容firefox):<br /><br />
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"><span>這里是要滾動(dòng)的內(nèi)容</span></DIV>
<script language="javascript" type="text/javascript">
<!--
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//當(dāng)滾動(dòng)條到達(dá)右邊頂端時(shí)
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
//當(dāng)滾動(dòng)條滾動(dòng)了初始內(nèi)容的寬度時(shí)滾動(dòng)條回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>
您可能感興趣的文章:
- JS與HTML結(jié)合使用marquee標(biāo)簽實(shí)現(xiàn)無(wú)縫滾動(dòng)效果代碼
- JQuery插件Marquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
- div+css+js實(shí)現(xiàn)無(wú)縫滾動(dòng)類似marquee無(wú)縫滾動(dòng)兼容firefox
- js實(shí)現(xiàn)的類marquee水平循環(huán)滾動(dòng)
- javascript 模擬Marquee文字向左均勻滾動(dòng)代碼
- Class Of Marquee Scroll通用不間斷滾動(dòng)JS封裝類
- 用javascript實(shí)現(xiàn)代替marquee的滾動(dòng)字幕效果代碼
- 用javascript代替marquee的滾動(dòng)字幕效果代碼
- 再次更新!MSClass (Class Of Marquee Scroll通用不間斷滾動(dòng)JS封裝類 Ver 1.6)
- JS實(shí)現(xiàn)無(wú)縫循環(huán)marquee滾動(dòng)效果
相關(guān)文章
JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解的相關(guān)資料,在JavaScript中,邏輯OR運(yùn)算符用||表示。本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05javascript判斷ie瀏覽器6/7版本加載不同樣式表的實(shí)現(xiàn)代碼
ie6/ie7的兼容問(wèn)題很讓人苦惱,我們可以針對(duì)這兩個(gè)版本的瀏覽器單獨(dú)寫?yīng)毩⒌臉邮奖恚瑏?lái)解決兼容問(wèn)題。這里的例子以判斷ie6與ie7來(lái)加載不同的樣式表2011-12-12解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問(wèn)題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12Layer.js實(shí)現(xiàn)表格溢出內(nèi)容省略號(hào)顯示,懸停顯示全部的方法
今天小編就為大家分享一篇Layer.js實(shí)現(xiàn)表格溢出內(nèi)容省略號(hào)顯示,懸停顯示全部的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JavaScript省市級(jí)聯(lián)下拉菜單實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript省市級(jí)聯(lián)下拉菜單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02