關于文字和圖片的滾動以及滾動實現的方式方法是老得不能再老的問題了。相信只要接觸過網站網頁的基本都知道和了解，但是全網都沒有一個比較系統化的介紹和說明比較，今天361模板時間比較充足就給大家做個這樣的教程。讓大家系統的了解學習一下，主要針對新手，老鳥大神請繞道。
<marquee><h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;">簡單的無縫向上滾動效果演示1</h1></marquee>
這里是使用的<marquee>實現最為簡單的滾動，當然<marquee>可以附帶很多屬性:
1.direction屬性：滾動方向(包括4個值：up、down、left、right)
說明：up：從下向上滾動；down：從上向下滾動；left：從右向左滾動；right：從左向右滾動。
語法：
<marquee direction="滾動方向">...</marquee>
2.behavior屬性：滾動方式(包括3個值：scroll、slide、alternate)
說明：scroll：循環滾動，默認效果；slide：只滾動一次就停止；alternate：來回交替進行滾動。
語法：
<marquee behavior="滾動方式">...</marquee>
3.scrollamount屬性：滾動速度(滾動速度是設置每次滾動時移動的長度，以像素為單位)
語法：
<marquee scrollamount="5">...</marquee>
4.scrolldelay屬性:設定滾動兩次之間的延遲時間，值大了會有一步一停頓的效果(設置滾動的時間間隔，單位是毫秒)
語法：
<marquee scrolldelay="100">...</marquee>
5.loop屬性：設定滾動循環的次數(默認值是-1，滾動會不斷的循環下去)
語法：
<marquee loop="2">...</marquee>
例如：
<marquee loop="-1" bgcolor="#CCCCCC">我會不停地走。</marquee>
<marquee loop="2" bgcolor="#CCCCCC">我只走兩次哦</marquee>
6.width、height屬性：設定滾動字幕的寬度、高度
語法：
<marquee width="500" height="200">...</marquee>
7.bgcolor屬性：設定滾動字幕的背景顏色(可以是顏色值，也可以是rgb()或rgba()函數)
語法：
<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>
8.hspace、vspace屬性：空白空間(相當于設置margin值)
說明：hspace：設定活動字幕里所在的位置距離父容器水平邊框的距離，如hspace=“10”，即等同于：margin：0 10px；
vspace：設定活動字幕里所在的位置距離父容器垂直邊框的距離，如vspace=“10”，即等同于：margin：10px 0；
語法：
<marquee hspace="10" vspace="10">...</marquee>
(等同于：margin：10px；)
9.align屬性：設定滾動字幕內容的對齊方式(包括9個值：absbottom、absmiddle、baseline、bottom、left、middle、right、texttop、top)
說明：absbottom：絕對底部對齊（與g、p等字母的最下端對齊）
absmiddle：絕對中央對齊
baseline：底線對齊
bottom：底部對齊（默認）
left：左對齊
middle：中間對齊
right：右對齊
texttop：頂線對齊
top：頂部對齊
語法：
<marquee align="對齊方式">...</marquee>
10.face屬性：設定滾動字幕的文字字體
語法：
<marquee font="楷體_GB2312"></marquee>
11.color屬性：設定滾動字幕的文字顏色
語法：
<marquee color="#333"></marquee>
12.size屬性：設定滾動字幕的文字字號
語法：
<marquee size="3"></marquee>
13.STRONG屬性：設定滾動字幕的文字加粗
語法：
<marquee STRONG></marquee>
另外還有2個鼠標兩個事件：
onMouseOut="this.start()"
用來設置鼠標移出該區域時繼續滾動
onMouseOver="this.stop()"
用來設置鼠標移入該區域時停止滾動
例如下面的這端滾動代碼
<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">簡單的jQuery無縫向上滾動效果演示1</marquee>
1、css代碼如下：
#scrollobj{ white-space:nowrap; overflow:hidden; width:300px; margin:0 auto; height:80px; line-height:80px; background-color: #FF0000; color: #FFFF00; font-size:30px; font-weight:800;}2、JS代碼如下
function scroll(obj){ var tmp=(obj.scrollLeft)++; if(obj.scrollLeft==tmp){ obj.innerHTML += obj.innerHTML; } if(obj.scrollLeft>=obj.firstChild.offsetWidth){ obj.scrollLeft=0; }}setInterval("scroll(document.getElementById('scrollobj'))",40);里面的數字40是控制滾動速度的，可以根據自己的需要設置快慢。
3、HTML代碼
<div id="scrollobj">簡單的jQuery無縫向上滾動效果演示1!!! </div>
也可以參看《js向上滾動消息框代碼 向上翻滾公告信息代碼》。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>簡單的jQuery無縫向上滾動效果演示</title><style>* {padding:0;margin:0;font-family:"微軟雅黑";}li {list-style:none;}a {text-decoration:none;}img {border:none;}.box {padding-left:50px;background:url("images/xtb.png") no-repeat;margin-top:100px;margin-left:100px;}.winBox {width:300px;height:40px;overflow:hidden;position:relative;background:pink;}.scroll {/*width的大小是根據下面li的長度和多少個li而定的，需注意！*/width:1500px;position:absolute;left:0px;top:0px;}.scroll li {width:150px;float:left;line-height:40px;text-align:center;} </style><script src="http://m.survivalescaperooms.com/jquery/jquery-1.7.1.js"></script><script type="text/javascript">$(function() { var num = 0; function goLeft() { //750是根據你給的尺寸，可變的 if (num == -750) { num = 0; } num -= 1; $(".scroll").css({ left: num }) } //設置滾動速度 var timer = setInterval(goLeft, 20); //設置鼠標經過時滾動停止 $(".box").hover(function() { clearInterval(timer); }, function() { timer = setInterval(goLeft, 20); })})</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <div> <div> <ul> <li><a href="#">時尚休閑褲68元</a></li> <li><a href="#">羊呢絨套衫38元</a></li> <li><a href="#">新款雪地靴88元</a></li> <li><a href="#">加厚法蘭絨108元</a></li> <li><a href="#">連褲襪19元2雙</a></li> <li><a href="#">時尚休閑褲68元</a></li> <li><a href="#">羊呢絨套衫38元</a></li> <li><a href="#">新款雪地靴88元</a></li> <li><a href="#">加厚法蘭絨108元</a></li> <li><a href="#">連褲襪19元2雙</a></li> </ul> </div></div> </body></html>好了，基本夠用了，今天就給大家講這些文字和圖片的滾動代碼，打完收工拉。
以上就是文字圖片滾動實現方法介紹及區別分析的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
