html跑馬燈/走馬燈效果

現(xiàn)跑馬燈的方法很多，其中最簡單的是采用一句Html代碼來實(shí)現(xiàn)，我們?cè)谛枰霈F(xiàn)跑馬燈效果的地方插入“<marquee>滾動(dòng)的文字</marquee>”語句，它的效果如下所示：

滾動(dòng)的文字

適當(dāng)?shù)倪\(yùn)用<marquee>標(biāo)簽的參數(shù)，可以表現(xiàn)出不同的效果，請(qǐng)看下面的幾個(gè)例子：

1、左右彈來彈去的跑馬燈

彈來彈去跑馬燈! 實(shí)現(xiàn)的方法就是在IE的標(biāo)簽上稍微多加了幾個(gè)參數(shù)產(chǎn)生了更加豐富的變化。設(shè)置behavior=alternate表示雙向移動(dòng)，direction= left表示運(yùn)動(dòng)方向向左。marquee的寬度可以使用絕對(duì)象素值，例如width=200等這個(gè)值限定了跑馬燈滾動(dòng)的范圍。需要說明的是該效果在 Netscape下是看不到的。

源碼粘貼框：

<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>

２、跑的很快的跑馬燈

跑的很快跑馬燈!　只要在<marquee>標(biāo)簽后面加上“scrollamount=15”即可,修改=后邊的數(shù)字參數(shù)即可限制文字移動(dòng)的速度。

３、帶有超級(jí)鏈接的跑馬燈

帶超級(jí)鏈接的跑馬燈!點(diǎn)我試試？還有一條呢!點(diǎn)我試試？　實(shí)現(xiàn)的方法很簡單，把整個(gè)<marquee></marquee>語句包含在超鏈接中就行，你看看下面的代碼就清楚了。當(dāng)然你也可以把包含在<marquee></marquee>中的各條內(nèi)容分別加上不同的鏈接，這樣的跑馬燈就可用來發(fā)布滾動(dòng)新聞或是做站點(diǎn)導(dǎo)航了。

如果你想給跑馬燈的文字加上顏色，換用不同的字體（默認(rèn)是宋體，換體就要加代碼），只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色，在“size=”后邊換上適合的字號(hào)，如果想讓字體加粗，就再加上<STRONG>。

請(qǐng)看一下效果： 帶超級(jí)鏈接的跑馬燈!點(diǎn)我試試？ 還有一條呢!點(diǎn)我試試？上面效果的代碼碼如下：

<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超鏈接的跑馬燈!點(diǎn)我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點(diǎn)我試試？</FONT></STRONG></a> </marquee>

以上幾個(gè)例子都是<marquee>標(biāo)簽參數(shù)的應(yīng)用，下面把所有可以利用的參數(shù)列在表中供你參考，不過還是要提醒你，<marquee>標(biāo)簽只被IE所支持，使用Netscape瀏覽器是看不到的噢。

參數(shù)用法介紹behavior=scroll, slide, alternate跑馬方式：循環(huán)繞行，只跑一次就停住，來回往復(fù)運(yùn)動(dòng)direction=left,right跑馬方向：從左向右，從右向左loop=100跑馬次數(shù)：循環(huán)100次，如不寫默認(rèn)為一直循環(huán)width=100%,height=200跑馬范圍：寬為100%，高為200像素scrollamount=20跑馬速度：數(shù)越大越快scrolldelay=500跑馬延時(shí)：毫秒數(shù)，利用它可實(shí)現(xiàn)躍進(jìn)式滾動(dòng)hspace=20，vspace=20跑馬區(qū)域與其它區(qū)域間的空白大小bgcolor=#00FFCC跑馬區(qū)域的背景顏色face=楷體_GB2312跑馬燈文字字體color=#ff0000跑馬燈文字顏色size=3跑馬燈文字字號(hào)STRONG跑馬燈文字加粗

你已經(jīng)看到，盡管<marquee>參數(shù)不少，但畢竟不能實(shí)現(xiàn)復(fù)雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會(huì)采用JavaScript來實(shí)現(xiàn)跑馬燈。

個(gè)視頻用CSS來寫一個(gè)酷炫的跑馬燈加載等待的效果。

·來看一下代碼：<span style="--：html結(jié)構(gòu)非常簡單，加載的這些小圓點(diǎn)等一下就通過這些width的尾元素來寫，一共有二十個(gè)，每個(gè)里面都定義了一個(gè)變量i。當(dāng)然這一堆東西是可以通過JS來生成的，也非常簡單，大家可以自己試著去改一下。

·樣式現(xiàn)在寫了一些基本的樣式，其它樣式重新來寫。<span style="首先是加載的這個(gè)區(qū)域，給它一個(gè)相對(duì)定位，大小是120乘以120。<div class="loader"然后寫一下這些span。

·現(xiàn)在還沒有什么東西，因?yàn)檫@些小圓點(diǎn)還沒有寫，就一個(gè)背景，這些小圓點(diǎn)通過width的尾元素來寫，大小給15像素就可以了，給個(gè)背景顏色還有圓角。現(xiàn)在這些小圓點(diǎn)是重疊在一起了，可以把它旋轉(zhuǎn)開。

·width進(jìn)行一個(gè)load，用一下計(jì)算的函數(shù)，用定義好的這個(gè)變量乘以18度。然后給這些小圓點(diǎn)加一些陰影，一共五層陰影非常簡單，就給它疊加起來。

·接下來就是動(dòng)畫的效果。首先先讓背景顏色可以不斷的切換起來，給它綁定一個(gè)動(dòng)畫，來寫一下這個(gè)動(dòng)畫，非常簡單。width：1通過濾鏡去調(diào)整它的色相就可以了。position：relativ開始在0度的位置，把色相的角度剛好轉(zhuǎn)一圈，現(xiàn)在背景顏色就已經(jīng)有變化了。

·最后就是怎么樣讓這些小圓點(diǎn)有一個(gè)跑馬燈的加載效果。這里很簡單，再來寫一個(gè)動(dòng)畫，對(duì)它進(jìn)行縮放，一開始保持原來的大小，然后到百分之八十一，直到后面就讓它消失，把這個(gè)動(dòng)畫綁定在偽元素上面。

現(xiàn)在這些小圓點(diǎn)也有動(dòng)畫了，但是它們是整體同時(shí)出現(xiàn)同時(shí)消失的，沒有那種跑馬燈的加載效果。其實(shí)也非常簡單，只要讓這些小圓點(diǎn)的動(dòng)畫起始時(shí)間不一樣就可以了，也就是給它加一個(gè)動(dòng)畫的延遲。這里同樣要計(jì)算一下，用定義好的變量i每個(gè)都乘以0.1秒。

來看一下最終的效果，沒有問題，這種跑馬燈的加載效果就完成了。

這個(gè)視頻就到這里，感謝大家的收看。

/郭遠(yuǎn)明

我們時(shí)常能看到有些網(wǎng)站只要鼠標(biāo)經(jīng)過，就會(huì)逐個(gè)點(diǎn)亮，鼠標(biāo)一離開，就會(huì)變暗，這種效果就是跑馬燈效果。具體要怎么實(shí)現(xiàn)呢？且看源代碼和操作步驟，輕松搞定炫酷吊炸天的跑馬燈：

1.首先將鼠標(biāo)光標(biāo)放置在需要實(shí)現(xiàn)跑馬燈效果的設(shè)計(jì)頁面上，然后插入兩個(gè)層（即div）和左右兩個(gè)超鏈接，源代碼如下：

</div>

2.在層里面插入項(xiàng)目列表和6張需要進(jìn)行滾動(dòng)的圖片，源代碼如下：

<ul>

</ul>

3.切換到代碼視圖頁面，輸入如下代碼：

<style>

body,div,ul,li{margin:0;padding:0;}

ul,li{list-style-type:none;}

#roll{width:600px;margin:120px auto;position:relative;}

.warp{width:600px;border:1px solid

#000;height:150px;text-align:center;overflow:hidden;position:relative;}

#roll

li{float:left;width:150px;height:150px;line-height:150px;background:#aacccc;margin-right:5px}

#roll #left{position:absolute;left:-25px;top:0px;display:block;height:150px;}

#roll #right{position:absolute;left:-25px;top:0px;display:block;height:150px;}

#roll ul{position:absolute;left:0px;top:0px;}

</style>

4.還需要加入JavaScript代碼來實(shí)現(xiàn)效果：

function $(id){return document.getElementById(id);}

window.onload=function(){

var oDiv=$("roll");

var oUl=oDiv.getElementByTagName("ul")[0];

var oLi=oUl.getElementByTagName("li");

var oBtnL=$("left");

var oBtnR=$("right");

var timer=null;

var iSpeed=-2;//滾動(dòng)速度，數(shù)字越大，滾動(dòng)越快！

oUl.innerHTML+=oUl.innerHTML;

oUl.style.width=(oLi[0].offsetWidth+5)*oLi.length+"px";

timer=setInterval(function){

oUl.style.left=oUl.offsetLeft+iSpeed+"px";

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left="0px";

}

else if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+"px";

};

},30);

oBtnL.onmouseover=function(){ iSpeed=-2;}

oBtnR.onmouseover=function(){ iSpeed=2;}

};

</script>

這就輕松搞定6張圖片的跑馬燈效果了！看著比較復(fù)雜，其實(shí)很多語言跟英語和邏輯是直接關(guān)聯(lián)的，像“function（）”函數(shù)就是調(diào)用一個(gè)統(tǒng)一的代碼塊，像“if”語句就是用來判斷情況分別執(zhí)行的代碼，而一些諸如“l(fā)eft”、“right”、”width”、“height”純粹就是英文標(biāo)注了。

輕松學(xué)號(hào)語法巧用代碼，就可以實(shí)現(xiàn)很多炫酷的網(wǎng)頁效果了！

本文由郭遠(yuǎn)明授權(quán)發(fā)布，歡迎分享和轉(zhuǎn)載；轉(zhuǎn)載請(qǐng)注明出處！

在線咨詢

上一篇：前端 HTML：如何創(chuàng)建網(wǎng)頁 01
下一篇：CSS 中幾種最常用的水平垂直居中的方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html跑馬燈/走馬燈效果

您的項(xiàng)目需求