                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /信息滾動效果制作

我的橫向滾動代碼提供給大家

<html>
<head>
	<meta?charset="utf-8"?/>
	<title>左右走馬燈</title>
	<style?type="text/css">
		*?{?margin:?0;?padding:?0;?border:?0;?}
		ul?{?list-style:?none;?}
		li?{?float:?left;?font-size:?12px;?font-weight:?700;?height:?28px;?display:?inline-block;?line-height:?28px;?}
		#wrap?{?width:?100%;?margin:?0?auto;?padding:?10px?0;?background-color:?rgba(0,0,0,0.2);?overflow:?hidden;?}
		#head?{?width:?100%;?text-align:?center;?}
		#head?span?{?font-size:?20px;?font-family:?Microsoft?Yahei;?font-weight:?700;?}
		#body?{?width:?900px;?height:?28px;?overflow:?hidden;?margin:?0?auto;?}
		#content?{?width:?2400px;?}
		#list1?{?float:?left;?background-color:?rgba(0,0,0,0.2);?}
		#list2?{?float:?left;?background-color:?rgba(0,0,0,0.4);?}
	</style>
</head>
<body>
	<div?id="wrap">
		<div?id="head"><span>向左滾動樣式</span></div>
		<div?id="body">
			<div?id="content">
				<div?id="list1">
					<ul>
						<li>1.橫向加長版滾動信息</li>
						<li>2.橫向加長版滾動信息</li>
						<li>3.橫向加長版滾動信息</li>
						<li>4.橫向加長版滾動信息</li>
						<li>5.橫向加長版滾動信息</li>
						<li>6.橫向加長版滾動信息</li>
						<li>7.橫向加長版滾動信息</li>
						<li>8.橫向加長版滾動信息</li>
						<li>9.橫向加長版滾動信息</li>
					</ul>
				</div>
				<div?id="list2"></div>
			</div>
		</div>
	</div>

	<script?type="text/javascript">
		var?area?=?document.getElementById('body');
		var?list1?=?document.getElementById('list1');
		var?list2?=?document.getElementById('list2');
		var?speed?=?10;
		area.scrollLeft?=?0;
		list2.innerHTML?=?list1.innerHTML;
		function?scrollUp()?{
			if(area.scrollLeft?>=?list1.scrollWidth)?{
				area.scrollLeft?=?0;
			}?else?{
				area.scrollLeft?++;
			}
		}
		var?myScroll?=?setInterval("scrollUp()",?speed);
		area.onmouseover?=?function()?{
			clearInterval(myScroll);
		}
		area.onmouseout?=?function()?{
			myScroll?=?setInterval("scrollUp()",?speed);
		}
	</script>
</body>
</html>