html跑馬燈/走馬燈效果

現跑馬燈的方法很多，其中最簡單的是采用一句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來實現跑馬燈。

tml代碼：

<div class="scroll_vertical">
<p class="title">小律正在智能運算 ··· ···</p>
<div class="box">
<ul class="list">
<li>('勞動爭議', 0.476702), ('婚姻家庭', 0.13224116) </li>
<li>('勞動爭議', 0.234234), ('婚姻家庭', 0.54656465) </li>
<li>('勞動爭議', 0.675675), ('婚姻家庭', 0.435345) </li>
<li>('勞動爭議', 0.234234), ('婚姻家庭', 0.456456) </li>
<li>('勞動爭議', 0.234234), ('婚姻家庭', 0.13256756724116) </li>
<li>('勞動爭議', 0.123123), ('婚姻家庭', 0.345345) </li>
<li>('勞動爭議', 0.345636), ('婚姻家庭', 0.23452344) </li>
<li>('勞動爭議', 0.678979), ('婚姻家庭', 0.13224116) </li>
</ul>
</div>
</div>

jquery代碼：

//播放速度
var speed = 2000;
//控制范圍，符合jQuery路徑即可
var block = '.list li';
//需要顯示的內容條目數
var eq = 6;
var h = 0;
if($(block).length > eq){
$(block).slice(eq).css('display','none');
//播放開始
h = setInterval('scrollContent("'+block+'",'+eq+',2)',speed);
}

兩天，一直在跟大家侃css3 的動畫效果，今天，就跟大家分享一個很不錯的跑馬燈效果。

第一步：html結構

<div class="container"> 
 <div class="piece-box">
 <div class="piece-box2">
 <div class="piece piece-1"></div>
 <div class="piece piece-2"></div>
 <div class="piece piece-3"></div>
 <div class="piece piece-4"></div>
 <div class="piece piece-5"></div>
 <div class="piece piece-6"></div>
 </div>
 </div>
</div>

第二步：加上必要的3D屬性，進入3D世界

/*容器*/
.container { 
 -webkit-perspective: 1000px; 
 -moz-perspective: 1000px; 
 -ms-perspective: 1000px; 
 perspective: 1000px;

第三步：加入必要的樣式

.piece-1 { 
 background: #FF6666; 
 -webkit-transform: rotateY(0deg) translateZ(173.2px); 
 -ms-transform: rotateY(0deg) translateZ(173.2px); 
 -o-transform: rotateY(0deg) translateZ(173.2px); 
 transform: rotateY(0deg) translateZ(173.2px);

第四步：animation讓3D動起來

.piece-box2 {

今天，這個效果是我一次偶然的機會發現的，現在，我把它和大家一起分享一下。怎么樣，效果還可以吧。

在線咨詢

上一篇：音視頻格式轉換神器與html視頻元素加字幕-零基礎自學網頁制作
下一篇：HTML5手機頁游怎么代理 H5代理流程須知

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html跑馬燈/走馬燈效果

您的項目需求