欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于javascript的無縫滾動(dòng)動(dòng)畫1

 更新時(shí)間：2020年08月07日 10:45:17   作者：司徒正美  
這篇文章主要介紹了基于javascript的無縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

無縫滾動(dòng)好像是互聯(lián)網(wǎng)廣告最大的一個(gè)載體，可以用“無處不在”來形容它。不過它比起早期的閃光字體，浮動(dòng)廣告算進(jìn)步了。由于需求巨大，做前臺遲早會(huì)遇到它。我先給出結(jié)構(gòu)層部分，再慢慢講解其實(shí)現(xiàn)原理。

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="無縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無縫滾動(dòng)"/>
 </dt>
 <dd></dd>
</dl>

我自認(rèn)為這個(gè)結(jié)構(gòu)比網(wǎng)上那些純DIV的結(jié)構(gòu)好許多，起碼可以節(jié)省許多id與class。都不知那個(gè)傻冒最先提出“DIV+CSS”這個(gè)說法，正確的說法應(yīng)該是"xhtml+CSS"。換言之，就是在宏觀的布局上，用塊狀元素代替table，由于DIV的默認(rèn)樣式較少，因此比較常用，table則回歸和專注于數(shù)據(jù)顯示。在微觀的格式化上，用CSS代替原來b、big、center、i 、s、small、 strike、tt這些單純用于樣式設(shè)置的標(biāo)簽，很明顯CSS的能力比它們更強(qiáng)大。

實(shí)現(xiàn)原理與純CSS相冊點(diǎn)擊錨點(diǎn)切換相應(yīng)的圖片差不多，都是利用scrollTop。過程如下，因?yàn)槲覀冊O(shè)置dl的overflow為hidden，所以其左邊的滾動(dòng)條就不可見了。當(dāng)我們不斷增加其scrollTop時(shí)，它的內(nèi)容就不斷往上移動(dòng)，抵達(dá)到dl的可視區(qū)，把原來上面可見內(nèi)容擠掉，效果有點(diǎn)像設(shè)置了dl的margin-top為負(fù)數(shù)。繼續(xù)增加scrollTop，直到我們看到dd元素。這時(shí)，我們要看一下dt元素了，原本它為空元素，克隆了dd元素的圖片，其實(shí)是為了起一個(gè)遮眼法的效果。當(dāng)dt元素完全被dd元素?cái)D出dl的可視區(qū)時(shí)，我們驚訝地發(fā)現(xiàn)，這時(shí)dl元素可視區(qū)的樣子和它最初的樣式是一模一樣的。dd元素拷貝dt元素的圖片的作用也在于此。但繼續(xù)往下走，就肯定會(huì)露餡，因?yàn)閐d元素下面就沒有元素了，沒有圖片給我們顯示了。因此就在這一刻，我們把dl的元素scrollTop打回原形，重新回到dt元素圖片的顯示中。

那么問題是這一刻我們怎樣確定呢？關(guān)鍵是這句“dt元素完全被dd元素?cái)D出dl的可視區(qū)”，我們可以取dt元素的offsetHeight，這是dt元素的高加上padding與border，也可以取dd的offsetTop，這是dd元素頂部到dl元素頂部的距離?？紤]到IE的怪癖模式，我決定先用offsetTop。既然要用offsetTop，我們需要指定offsetParent。不過許多教程都忘記了為dl元素設(shè)置position:relative。因?yàn)樵贗E6中，offsetParent直接為元素的父元素，而IE7，IE8與標(biāo)準(zhǔn)瀏覽器則為離它最近的被定了位的父級元素，沒有則為body元素。

#marquee {
 position:relative;
 height:300px;
 width:200px;
 overflow:hidden;
 border:10px solid #369;
}
#marquee img {
 display:block;
}
#marquee dd {
 margin:0px;
 padding:0px;
}

var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){ 
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
}
window.onload = function(){
 Marquee("marquee");
}
<!doctype html>
<title>javascript無縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無縫滾動(dòng) by 司徒正美" />
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 height:300px;
 width:200px;
 overflow:hidden;
 border:10px solid #369;
 }
 #marquee img {
 display:block;
 }
 #marquee dd {
 margin:0px;
 padding:0px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(dòng)(向上滾動(dòng)) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

上面的例子是向上滾動(dòng)，向下滾動(dòng)只不過是一開始把dl元素的scrollTop設(shè)置成dd元素的offsetTop的值，然后遞減就是！

<!doctype html>
<title>javascript無縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無縫滾動(dòng) by 司徒正美" />
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 height:300px;
 width:200px;
 overflow:hidden;
 position:relative;
 border:10px solid #F2F1D7;
 }
 #marquee img {
 display:block;
 }
 #marquee dd {
 margin:0px;
 padding:0px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 container.scrollTop = clone.offsetTop;
 var rolling = function(){
 if(container.scrollTop == 0){
 container.scrollTop = clone.offsetTop;
 }else{
 container.scrollTop--;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(dòng)(向下滾動(dòng)) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

至于向左滾動(dòng)就相對麻煩些。首先我們要把圖片橫著排列，包括dt元素里面的，還有后來克隆到dd元素的，這要求用到浮動(dòng)。但這還未完，我們還要讓dt元素與dd元素橫著排列，于是我們就得對dl元素進(jìn)行設(shè)置浮動(dòng)。同時(shí)我們還得對dl元素的寬設(shè)置一個(gè)很大的值，目的是讓它不換行，并且能一字排開所有圖片。我設(shè)置為1000%，即瀏覽器的寬的十倍。對于圖片，它浮動(dòng)時(shí)，左右之間都存在間隙，設(shè)置margin與padding為0這樣?，F(xiàn)的方法是無法去掉它們。只好走極端了，讓它們外套一個(gè)a元素，反正現(xiàn)實(shí)中當(dāng)我們點(diǎn)擊圖片時(shí)它一定會(huì)跳轉(zhuǎn)到另一個(gè)頁面或頁面的另一個(gè)地方，這就是用a元素來做的。由于a元素是內(nèi)聯(lián)元素，不存在盒子元素，它會(huì)向內(nèi)收縮，把圖片外面的空隙吞噬掉。最后，我們沒有理由一下子顯示所有圖片，因此我們再在dl元素外面套一個(gè)div，在那里設(shè)置overflow與position與width等關(guān)鍵樣式。

<div id="marquee">
 <dl>
 <dt>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="無縫滾動(dòng)"</a>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="無縫滾動(dòng)"</a>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="無縫滾動(dòng)"</a>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="無縫滾動(dòng)"</a>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="無縫滾動(dòng)"</a>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="無縫滾動(dòng)"</a>
 <a  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="無縫滾動(dòng)"</a>
 </dt>
 <dd></dd>
 </dl>
</div>
#marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #B45B3E;
}
#marquee img {
 border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
}
#marquee dl{
 width:1000%;
 height:150px;
}

javascript就沒多大改動(dòng)，只不過將offsetTop換成offsetLeft，scrollTop換成scrollLeft。因此熟悉CSS，真是好處多多。

var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollLeft == clone.offsetLeft){
 container.scrollLeft = 0;
 }else{
 container.scrollLeft++;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
}
<!doctype html>
<title>javascript無縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無縫滾動(dòng) by 司徒正美" />
<base >
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #B45B3E;
 }
 #marquee img {
 border:0px;
 }
 #marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
 }
 #marquee dl{
 width:1000%;
 height:150px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollLeft == clone.offsetLeft){
 container.scrollLeft = 0;
 }else{
 container.scrollLeft++;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(dòng)(向左滾動(dòng)) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a ><img src="o_s017.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s018.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s019.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s020.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s021.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s022.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s023.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

向右滾動(dòng)也不難，照瓢畫葫蘆就是！

<!doctype html>
<title>javascript無縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無縫滾動(dòng) by 司徒正美" />
<base >
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #8080C0;
 }
 #marquee img {
 border:0px;
 }
 #marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
 }
 #marquee dl{
 width:1000%;
 height:150px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 container.scrollLeft = clone.offsetLeft
 var rolling = function(){
 if(container.scrollLeft == 0){
 container.scrollLeft = clone.offsetLeft;
 }else{
 container.scrollLeft--;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(dòng)(向右滾動(dòng)) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a ><img src="o_s017.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s018.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s019.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s020.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s021.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s022.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s023.jpg" alt="javascript無縫滾動(dòng) by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

再來一個(gè)滾動(dòng)文字的，感覺這東西與tab一樣，最大的優(yōu)點(diǎn)是在有限的空間顯示海量的信息。

<!doctype html>
<title>javascript無縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無縫滾動(dòng) by 司徒正美" />
<base >
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee,#marquee li {
 margin:0;
 padding:0;
 list-style:none;
 }
 #marquee {
 position:relative;
 height:100px;
 width:280px;
 overflow:hidden;
 border:10px solid #c0c0c0;
 }
 #marquee a {
 display:block;
 padding:5px;
 text-decoration:none;
 white-space: nowrap;
 color:#000;
 }
 #marquee a:hover{
 background: #efefda;
 color:#3bcdfe
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("li")[0],
 speed = arguments[1] || 10,
 clone = original.cloneNode(true);
 container.appendChild(clone);
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//設(shè)置定時(shí)器
 container.onmouseover=function() {clearInterval(timer)}//鼠標(biāo)移到marquee上時(shí)，清除定時(shí)器，停止?jié)L動(dòng)
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無縫滾動(dòng)(向上滾動(dòng)) by 司徒正美</h1>
<ul id="marquee">
 <li>
 <a href="08/08/1541914.html">一步步教你實(shí)現(xiàn)純CSS的柱形圖</a>
 <a href="09/02/1558998.html">javascript十個(gè)最常用的自定義函數(shù)</a>
 <a href="08/24/1552862.html">javascript鼠標(biāo)事件總結(jié)</a>
 <a href="09/14/1566157.html">一個(gè)很簡單的淡入淡出相冊</a>
 <a href="09/18/1568925.html">純CSS相冊</a>
 <a href="08/13/1544365.html">一步步教你實(shí)現(xiàn)表格排序（第一部分）</a>
 </li>
</ul>

到此這篇關(guān)于基于javascript的無縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)javascript無縫滾動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論