快捷導(dǎo)航

div+css+js實(shí)現(xiàn)無縫滾動(dòng)類似marquee無縫滾動(dòng)兼容firefox

更新時(shí)間：2013年08月29日 18:02:57 作者：

marquee無縫滾動(dòng)想必大家都有見過，本文利用div+css+javascript也實(shí)現(xiàn)下類似的滾動(dòng)且兼容firefox，喜歡的朋友可以參考下

div+css+javascript 實(shí)現(xiàn)無縫滾動(dòng),marquee無縫滾動(dòng)，無縫滾動(dòng),兼容firefox

用marquee實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果（僅IE）：

復(fù)制代碼代碼如下:

 
<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();"> 
這里是要滾動(dòng)的內(nèi)容 
</marquee> 

用div+css+javascript實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果（兼容firefox）：

復(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>div+css+javascript 實(shí)現(xiàn)無縫滾動(dòng),marquee無縫滾動(dòng)，無縫滾動(dòng),兼容firefox</title> 
<style type="text/css"> 
#scrollobj { 
white-space: nowrap; 
overflow: hidden; 
width: 500px; 
} 
</style> 
</head> 
<body> 
<div id="scrollobj" onmouseover="javascript:_stop();" onmouseout="javascript:_start();"> 
這里是要滾動(dòng)的內(nèi)容 
</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; 
} 

/*往上*/ 
//var tmp = (obj.scrollTop)++; 
//if (obj.scrollTop == tmp) { 
// obj.innerHTML += obj.innerHTML; 
//} 
//if (obj.scrollTop >= obj.firstChild.offsetWidth) { 
// obj.scrollTop = 0; 
//} 
} 
var _timer = setInterval("scroll(document.getElementById('scrollobj'))", 20); 
function _stop() { 
if (_timer != null) { 
clearInterval(_timer); 
} 
} 
function _start() { 
_timer = setInterval("_scroll(document.getElementById('scrollobj'))", 20); 
} 
//--> 
</script> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

拖動(dòng)層效果，兼容IE和FF!
拖動(dòng)層效果，兼容IE和FF!...
2006-11-11
webpack-dev-server原理解析及跨域解決方法
這篇文章主要介紹了webpack-dev-server原理解析及跨域解決方法,需要的朋友可以參考下
2024-01-01
JavaScript+TypeScript實(shí)現(xiàn)并發(fā)隊(duì)列的示例
本文主要介紹了JavaScript+TypeScript實(shí)現(xiàn)并發(fā)隊(duì)列的示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08
怎樣在html文檔里做隔行換色的多行方法
怎樣在html文檔里做隔行換色的多行方法...
2007-01-01
webpack打包優(yōu)化的幾個(gè)方法總結(jié)
這篇文章主要介紹了webpack打包優(yōu)化的幾個(gè)方法總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
用JavaScript實(shí)現(xiàn) 鐵甲無敵獎(jiǎng)門人 “開口中”猜數(shù)游戲
JavaScript在常人看來都是門出不了廳堂的小語言，僅管它沒有明星語言的閃耀，但至少網(wǎng)頁的閃耀還是需要它的，同時(shí)它是一門很實(shí)用的語言。
2009-10-10
JavaScript中的View-Model使用介紹
這是一個(gè)十分常見的微博列表頁面，類似于新浪微博。上周末，在心無旁騖情況下，一共用了5個(gè)對(duì)象，產(chǎn)出400行代碼，實(shí)踐出一種代碼組織模式。
2011-08-08
JS面向?qū)ο缶幊袒A(chǔ)篇（二）封裝操作實(shí)例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊谭庋b操作,結(jié)合實(shí)例形式詳細(xì)分析了JS面向?qū)ο蠓庋b操作的相關(guān)概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
JS中typeof與instanceof之間的區(qū)別總結(jié)
本文是對(duì)JS中typeof與instanceof之間的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
JS裝飾者模式和TypeScript裝飾器
學(xué)習(xí)的目的是對(duì)裝飾者模式模式有進(jìn)一步的理解，并運(yùn)用在自己的項(xiàng)目中；對(duì)TypeScript裝飾器的理解，更好的使用裝飾器，例如在nodejsweb框架中、vue-property-decorator中，或者是自定義裝飾器，能熟練運(yùn)用并掌握其基本的實(shí)現(xiàn)原理。
2021-04-04