section標籤實現文字滾動

時間 2019-12-13

標籤 section 標籤實現文字滾動简体版

原文原文鏈接

h5新增樣式html

section標籤 使用demo

//h5新增屬性

h5新增滾動的標籤 <marquee>
<div style="padding-left: 20px;margin-top: 10px;color: #fff;">
<marquee behavior="scroll" bgcolor='red' direction="left" width='100%' height='30'>單方向循置參數的設置haha參數的設置參數的設置</marquee>
</div>

　　section標籤的使用屬性，與案例jquery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MARQUEE 的使用</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-size: 14px;
		}
	</style>
</head>
<body>
	
	<!-- 說明：<marquee>標籤，它是成對出現的標籤，首標籤<marquee>和尾標籤</marquee>之間的內容就是滾動內容。<marquee>標籤的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的。

		每一個屬性對應的屬性值：
		behavior屬性
	behavior屬性的參數值爲alternate、scroll、slide中的一個，分別表示文字來回滾動、單方向循環滾動、只滾動一次，須要注意的是:若是在<marquee>標籤中同時出現了direction和behavior屬性，那麼scroll和slide的滾動方向將依照direction屬性中參數的設置。
		bgcolor屬性
文字滾動範圍的背景顏色，參數值是16進制(形式:#AABBCC或#AA5566等)或預約義的顏色名字(如red、yellow、blue等)。以下所示:<marquee behavior=="slide" direction="left" bgcolor="red">個人背景色是紅色的</marquee> 
	direction屬性 
文字滾動的方向，屬性的參數值有down、left、right、up共四個單一可選值，分別表明滾動方向向下、向左、向右、向上。
width和height屬性 
width和height屬性的做用決定滾動文字在頁面中的矩形範圍大小。width屬性用以規定矩形的寬度，height屬性規定矩形的高度。這兩個屬性的參數值能夠是數字或者百分數，數字表示矩形所佔的(寬或高)像素點數，百分數表示矩形所佔瀏覽器窗口的(寬或高)百分比。以下所示: 
    <marquee width="300" height="30" bgcolor="red">我寬300像素，高30像素。</marquee>
	
	hspace和vspace屬性 
這兩個屬性決定滾動矩形區域距周圍的空白區域. 
    <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形邊緣水平和垂直距周圍各10像素。</marquee> 
    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形邊緣水平和垂直距周圍各50像素。</marquee> 

loop屬性 
loop屬性決定滾動文字的滾動次數，缺省是無限循環。參數值能夠是任意的正整數，若是設置參數值爲-1或infinite時將無限循環。以下所示: 
    <marquee loop="2">我滾動2次。</marquee> 
    <marquee loop="infinite">我無限循環滾動。</marquee> 
    <marquee loop="-1">我無限循環滾動。</marquee> 

    scrollamount和scrolldelay屬性 
這兩個屬性決定文字滾動的速度(scrollamount)和延時(scrolldelay)，參數值都是正整數。以下所示: 
    <marquee scrollamount="100">我速度很快.</marquee> 
    <marquee scrollamount="50">我慢了些。</marquee> 
    <marquee scrolldelay="30">我小步前進。</marquee> 
    <marquee scrolldelay="1000" scrollamount="100">我大步前進。</marquee> 
align屬性
這個屬性決定滾動文字位於距形內邊框的上下左右位置。您也能夠將<marquee>和</marquee>之間的內容替換爲圖像或其它對象等功能

onmouseover=this.stop() onmouseout=this.start() 表示當鼠標以上區域的時候滾動中止，當鼠標移開的時候又繼續滾動。

	 -->
	<marquee behavior="alternate">來回滾動參數的設置參數的設置</marquee>
	<div style="padding-left: 20px;margin-top: 10px;color: #fff;">
		<marquee behavior="scroll" bgcolor='red' direction="left" width='100%' height='30'>單方向循置參數的設置haha參數的設置參數的設置</marquee>
	</div>
	<div style="padding-left: 30px;margin-top: 10px;">
		<marquee behavior="slid">只滾動一次的設置haha參數的設置參數的設置</marquee>
	</div>
</body>
<script src="../../js/jquery_v3.3.1.js"></script>
<script>
	
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。