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

基于javascript的無(wú)縫滾動(dòng)動(dòng)畫(huà)1

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

無(wú)縫滾動(dòng)好像是互聯(lián)網(wǎng)廣告最大的一個(gè)載體,可以用“無(wú)處不在”來(lái)形容它。不過(guò)它比起早期的閃光字體,浮動(dòng)廣告算進(jìn)步了。由于需求巨大,做前臺(tái)遲早會(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="無(wú)縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無(wú)縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無(wú)縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無(wú)縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無(wú)縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無(wú)縫滾動(dòng)"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無(wú)縫滾動(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è)說(shuō)法,正確的說(shuō)法應(yīng)該是"xhtml+CSS"。換言之,就是在宏觀的布局上,用塊狀元素代替table,由于DIV的默認(rèn)樣式較少,因此比較常用,table則回歸和專(zhuān)注于數(shù)據(jù)顯示。在微觀的格式化上,用CSS代替原來(lái)b、big、center、i 、s、small、 strike、tt這些單純用于樣式設(shè)置的標(biāo)簽,很明顯CSS的能力比它們更強(qiáng)大。

實(shí)現(xiàn)原理與純CSS相冊(cè)點(diǎn)擊錨點(diǎn)切換相應(yīng)的圖片差不多,都是利用scrollTop。過(guò)程如下,因?yàn)槲覀冊(cè)O(shè)置dl的overflow為hidden,所以其左邊的滾動(dòng)條就不可見(jiàn)了。當(dāng)我們不斷增加其scrollTop時(shí),它的內(nèi)容就不斷往上移動(dòng),抵達(dá)到dl的可視區(qū),把原來(lái)上面可見(jiàn)內(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元素下面就沒(méi)有元素了,沒(méi)有圖片給我們顯示了。因此就在這一刻,我們把dl的元素scrollTop打回原形,重新回到dt元素圖片的顯示中。

那么問(wèn)題是這一刻我們?cè)鯓哟_定呢?關(guān)鍵是這句“dt元素完全被dd元素?cái)D出dl的可視區(qū)”,我們可以取dt元素的offsetHeight,這是dt元素的高加上padding與border,也可以取dd的offsetTop,這是dd元素頂部到dl元素頂部的距離。考慮到IE的怪癖模式,我決定先用offsetTop。既然要用offsetTop,我們需要指定offsetParent。不過(guò)許多教程都忘記了為dl元素設(shè)置position:relative。因?yàn)樵贗E6中,offsetParent直接為元素的父元素,而IE7,IE8與標(biāo)準(zhǔn)瀏覽器則為離它最近的被定了位的父級(jí)元素,沒(méi)有則為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)移開(kāi)時(shí)重設(shè)定時(shí)器
}
window.onload = function(){
 Marquee("marquee");
}
<!doctype html>
<title>javascript無(wú)縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無(wú)縫滾動(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)移開(kāi)時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無(wú)縫滾動(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無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

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

<!doctype html>
<title>javascript無(wú)縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無(wú)縫滾動(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)移開(kāi)時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無(wú)縫滾動(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無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

至于向左滾動(dòng)就相對(duì)麻煩些。首先我們要把圖片橫著排列,包括dt元素里面的,還有后來(lái)克隆到dd元素的,這要求用到浮動(dòng)。但這還未完,我們還要讓dt元素與dd元素橫著排列,于是我們就得對(duì)dl元素進(jìn)行設(shè)置浮動(dòng)。同時(shí)我們還得對(duì)dl元素的寬設(shè)置一個(gè)很大的值,目的是讓它不換行,并且能一字排開(kāi)所有圖片。我設(shè)置為1000%,即瀏覽器的寬的十倍。對(duì)于圖片,它浮動(dòng)時(shí),左右之間都存在間隙,設(shè)置margin與padding為0這樣?,F(xiàn)的方法是無(wú)法去掉它們。只好走極端了,讓它們外套一個(gè)a元素,反正現(xiàn)實(shí)中當(dāng)我們點(diǎn)擊圖片時(shí)它一定會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面或頁(yè)面的另一個(gè)地方,這就是用a元素來(lái)做的。由于a元素是內(nèi)聯(lián)元素,不存在盒子元素,它會(huì)向內(nèi)收縮,把圖片外面的空隙吞噬掉。最后,我們沒(méi)有理由一下子顯示所有圖片,因此我們?cè)僭赿l元素外面套一個(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="無(wú)縫滾動(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="無(wú)縫滾動(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="無(wú)縫滾動(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="無(wú)縫滾動(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="無(wú)縫滾動(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="無(wú)縫滾動(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="無(wú)縫滾動(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就沒(méi)多大改動(dòng),只不過(guò)將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)移開(kāi)時(shí)重設(shè)定時(shí)器
}
<!doctype html>
<title>javascript無(wú)縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無(wú)縫滾動(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)移開(kāi)時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無(wú)縫滾動(dòng)(向左滾動(dòng)) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a ><img src="o_s017.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

向右滾動(dòng)也不難,照瓢畫(huà)葫蘆就是!

<!doctype html>
<title>javascript無(wú)縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無(wú)縫滾動(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)移開(kāi)時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無(wú)縫滾動(dòng)(向右滾動(dòng)) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a ><img src="o_s017.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s018.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s019.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s020.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s021.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s022.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 <a ><img src="o_s023.jpg" alt="javascript無(wú)縫滾動(dòng) by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

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

<!doctype html>
<title>javascript無(wú)縫滾動(dòng) by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript無(wú)縫滾動(dòng) by 司徒正美" />
<meta name="description" content="javascript無(wú)縫滾動(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)移開(kāi)時(shí)重設(shè)定時(shí)器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript無(wú)縫滾動(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è)很簡(jiǎn)單的淡入淡出相冊(cè)</a>
 <a href="09/18/1568925.html">純CSS相冊(cè)</a>
 <a href="08/13/1544365.html">一步步教你實(shí)現(xiàn)表格排序(第一部分)</a>
 </li>
</ul>

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

相關(guān)文章

最新評(píng)論