整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
現跑馬燈的方法很多，其中最簡單的是采用一句Html代碼來實現，我們在需要出現跑馬燈效果的地方插入“<marquee>滾動的文字</marquee>”語句，它的效果如下所示：
滾動的文字
適當的運用<marquee>標簽的參數，可以表現出不同的效果，請看下面的幾個例子：
1、左右彈來彈去的跑馬燈
彈來彈去跑馬燈! 實現的方法就是在IE的標簽上稍微多加了幾個參數產生了更加豐富的變化。設置behavior=alternate表示雙向移動，direction= left表示運動方向向左。marquee的寬度可以使用絕對象素值，例如width=200等這個值限定了跑馬燈滾動的范圍。需要說明的是該效果在 Netscape下是看不到的。
源碼粘貼框：
<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>
２、跑的很快的跑馬燈
跑的很快跑馬燈! 只要在<marquee>標簽后面加上“scrollamount=15”即可,修改=后邊的數字參數即可限制文字移動的速度。
３、帶有超級鏈接的跑馬燈
帶超級鏈接的跑馬燈!點我試試？ 還有一條呢!點我試試？ 實現的方法很簡單，把整個<marquee></marquee>語句包含在超鏈接中就行，你看看下面的代碼就清楚了。當然你也可以把包含在<marquee></marquee>中的各條內容分別加上不同的鏈接，這樣的跑馬燈就可用來發布滾動新聞或是做站點導航了。
如果你想給跑馬燈的文字加上顏色，換用不同的字體（默認是宋體，換體就要加代碼），只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色，在“size=”后邊換上適合的字號，如果想讓字體加粗，就再加上<STRONG>。
請看一下效果： 帶超級鏈接的跑馬燈!點我試試？ 還有一條呢!點我試試？ 上面效果的代碼碼如下：
<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超鏈接的跑馬燈!點我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點我試試？</FONT></STRONG></a> </marquee>
以上幾個例子都是<marquee>標簽參數的應用，下面把所有可以利用的參數列在表中供你參考，不過還是要提醒你，<marquee>標簽只被IE所支持，使用Netscape瀏覽器是看不到的噢。
參數用法介紹behavior=scroll, slide, alternate跑馬方式：循環繞行，只跑一次就停住，來回往復運動direction=left,right跑馬方向：從左向右，從右向左loop=100跑馬次數：循環100次，如不寫默認為一直循環width=100%,height=200跑馬范圍：寬為100%，高為200像素scrollamount=20跑馬速度：數越大越快scrolldelay=500跑馬延時：毫秒數，利用它可實現躍進式滾動hspace=20，vspace=20跑馬區域與其它區域間的空白大小bgcolor=#00FFCC跑馬區域的背景顏色face=楷體_GB2312跑馬燈文字字體color=#ff0000跑馬燈文字顏色size=3跑馬燈文字字號STRONG跑馬燈文字加粗
你已經看到，盡管<marquee>參數不少，但畢竟不能實現復雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會采用JavaScript來實現跑馬燈。
個視頻用CSS來寫一個酷炫的跑馬燈加載等待的效果。
·來看一下代碼：<span style="--：html結構非常簡單，加載的這些小圓點等一下就通過這些width的尾元素來寫，一共有二十個，每個里面都定義了一個變量i。當然這一堆東西是可以通過JS來生成的，也非常簡單，大家可以自己試著去改一下。
·樣式現在寫了一些基本的樣式，其它樣式重新來寫。<span style="首先是加載的這個區域，給它一個相對定位，大小是120乘以120。<div class="loader"然后寫一下這些span。
·現在還沒有什么東西，因為這些小圓點還沒有寫，就一個背景，這些小圓點通過width的尾元素來寫，大小給15像素就可以了，給個背景顏色還有圓角。現在這些小圓點是重疊在一起了，可以把它旋轉開。
·width進行一個load，用一下計算的函數，用定義好的這個變量乘以18度。然后給這些小圓點加一些陰影，一共五層陰影非常簡單，就給它疊加起來。
·接下來就是動畫的效果。首先先讓背景顏色可以不斷的切換起來，給它綁定一個動畫，來寫一下這個動畫，非常簡單。width：1通過濾鏡去調整它的色相就可以了。position：relativ開始在0度的位置，把色相的角度剛好轉一圈，現在背景顏色就已經有變化了。
·最后就是怎么樣讓這些小圓點有一個跑馬燈的加載效果。這里很簡單，再來寫一個動畫，對它進行縮放，一開始保持原來的大小，然后到百分之八十一，直到后面就讓它消失，把這個動畫綁定在偽元素上面。
現在這些小圓點也有動畫了，但是它們是整體同時出現同時消失的，沒有那種跑馬燈的加載效果。其實也非常簡單，只要讓這些小圓點的動畫起始時間不一樣就可以了，也就是給它加一個動畫的延遲。這里同樣要計算一下，用定義好的變量i每個都乘以0.1秒。
來看一下最終的效果，沒有問題，這種跑馬燈的加載效果就完成了。
這個視頻就到這里，感謝大家的收看。
/郭遠明
我們時常能看到有些網站只要鼠標經過，就會逐個點亮，鼠標一離開，就會變暗，這種效果就是跑馬燈效果。具體要怎么實現呢？且看源代碼和操作步驟，輕松搞定炫酷吊炸天的跑馬燈：
1.首先將鼠標光標放置在需要實現跑馬燈效果的設計頁面上，然后插入兩個層（即div）和左右兩個超鏈接，源代碼如下：
<div id="roll">
<a href="javascript：;"id="left">左</a>
<a href="javascript：;"id="right">右</a>
<div class="warp">
</div>
</div>
2.在層里面插入項目列表和6張需要進行滾動的圖片，源代碼如下：
<ul>
<li><img src="1.jpg"width="150"height="150"/></li>
<li><img src="2.jpg"width="150"height="150"/></li>
<li><img src="3.jpg"width="150"height="150"/></li>
<li><img src="4.jpg"width="150"height="150"/></li>
<li><img src="5.jpg"width="150"height="150"/></li>
<li><img src="6.jpg"width="150"height="150"/></li>
</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代碼來實現效果：
<script>
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;//滾動速度，數字越大，滾動越快！
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張圖片的跑馬燈效果了！看著比較復雜，其實很多語言跟英語和邏輯是直接關聯的，像“function（）”函數就是調用一個統一的代碼塊，像“if”語句就是用來判斷情況分別執行的代碼，而一些諸如“left”、“right”、”width”、“height”純粹就是英文標注了。
輕松學號語法巧用代碼，就可以實現很多炫酷的網頁效果了！
本文由郭遠明授權發布，歡迎分享和轉載；轉載請注明出處！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
