分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼
更新時間:2011年09月21日 00:20:23 作者:
這是本人2007年進(jìn)行的一項研究,當(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知識點總結(jié)(四)之邏輯OR運(yùn)算符詳解
這篇文章主要介紹了JavaScript知識點總結(jié)(四)之邏輯OR運(yùn)算符詳解的相關(guān)資料,在JavaScript中,邏輯OR運(yùn)算符用||表示。本文介紹的非常詳細(xì),具有參考借鑒價值,感興趣的朋友一起看看吧2016-05-05javascript判斷ie瀏覽器6/7版本加載不同樣式表的實現(xiàn)代碼
ie6/ie7的兼容問題很讓人苦惱,我們可以針對這兩個版本的瀏覽器單獨寫?yīng)毩⒌臉邮奖恚瑏斫鉀Q兼容問題。這里的例子以判斷ie6與ie7來加載不同的樣式表2011-12-12解決Jstree 選中父節(jié)點時被禁用的子節(jié)點也會選中的問題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點時被禁用的子節(jié)點也會選中的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12Layer.js實現(xiàn)表格溢出內(nèi)容省略號顯示,懸停顯示全部的方法
今天小編就為大家分享一篇Layer.js實現(xiàn)表格溢出內(nèi)容省略號顯示,懸停顯示全部的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09