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

報錯Uncaught TypeError: Cannot set property 'scrollTop' of null 是怎么回事。。。。。？

<!DOCTYPE?HTML?>
<html>
	<head>
		<meta?charset="UTF-8">
		<title>無縫滾動</title>
		<style?type="text/css">
		body{font-size:12px;line-height:?24px;text-align:?center;}
		*{margin:?0;padding:?0;}
		ul{list-style:?none;}
		#mooc{width:?399px;border:?5px?solid?#ababab;-moz-border-radius:15px;
			-webkit-border-radius:15px;border-radius:15px;box-shadow:?2px?2px?10px?#ababab;
			margin:?50px?auto?0;text-align:?left;}
		#moocTitle{height:62px;overflow:?hidden;font-size:?26px;line-height:?62px;
			padding-left:?30px;background-image:?-moz-linear-gradient(top,#f05e6f,#c9394a);
			background-image:?-webkit-gradient(linear,left?top,left?bottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8fa1ff",endColorstr="#f05e6f",GradientType='0');border:?1px?solid?#f05e6f;-moz-border-radius:8px?8px?0?0;
			-webkit-border-radius:8px?8px?0?0;border-radius:?8px?8px?0?0;color:?#fff;position:?relative;}
		#moocbox{height:?144px;width:?335px;margin-left:?25px;margin-top:?10px;overflow:?hidden;}
		#mooc?ul?li{height:?24px;}

		</style>
		
		<script?type="text/javascript">
		var?area=document.getElementById('moocbox');
		var?con1=document.getElementById('con1');
		var?con2=document.getElementById('con2');
		var?speed=50;
		area.scrollTop=0;
		con2.innerHTML=con1.innerHTML;
		function?scrollUP(){
			if(area.scrollTop>=con1.scrollHeight){
				area.scrollTop=0;
			}else{
				area.scrollTop++;
			}
		}
		var?myScroll=setInterval("scrollUP()",speed);
		area.onmouseover=function(){
			clearInterval(myScroll);
		}
		area.onmouseout=function(){
			myScroll=setInterval("scrollUP()",speed);
		}
		</script>
	</head>
	<body>
		<div?id="mooc">
			<h3?id="moocTitle">無縫滾動示例</h3>
			<div?id="moocbox">
				<ul?id="con1">
					<li>11111</li>
					<li>22222</li>
					<li>33333</li>
					<li>44444o</li>
					<li>55555</li>
					<li>66666</li>
					<li>77777</li>
					<li>88888</li>
					<li>99999</li>
				</ul>
				<ul?id="con2">
					
				</ul>
			</div>
		</div>
	</body>
</html>

pinkhide27

2015-12-03

源自：信息滾動效果制作

關注問題我要回答

11112

操作

收起

2 回答

一毛錢回答被采納 +3 積分
2015-12-03

<!DOCTYPE?HTML?>
<html>

	<head>
		<meta?charset="UTF-8">
		<title>無縫滾動</title>
		<style?type="text/css">
			body{font-size:12px;line-height:?24px;text-align:?center;}
			????????*{margin:?0;padding:?0;}
			????????ul{list-style:?none;}
			????????#mooc{width:?399px;border:?5px?solid?#ababab;-moz-border-radius:15px;
			????????????-webkit-border-radius:15px;border-radius:15px;box-shadow:?2px?2px?10px?#ababab;
			????????????margin:?50px?auto?0;text-align:?left;}
			????????#moocTitle{height:62px;overflow:?hidden;font-size:?26px;line-height:?62px;
			????????????padding-left:?30px;background-image:?-moz-linear-gradient(top,#f05e6f,#c9394a);
			????????????background-image:?-webkit-gradient(linear,left?top,left?bottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8fa1ff",endColorstr="#f05e6f",GradientType='0');border:?1px?solid?#f05e6f;-moz-border-radius:8px?8px?0?0;
			????????????-webkit-border-radius:8px?8px?0?0;border-radius:?8px?8px?0?0;color:?#fff;position:?relative;}
			????????#moocbox{height:?144px;width:?335px;margin-left:?25px;margin-top:?10px;overflow:?hidden;}
			????????#mooc?ul?li{height:?24px;}
		</style>

		<script?type="text/javascript">
		var?speed?=?50;
		var?area;
		window.onload=function(){
			?area?=?document.getElementById('moocbox');
			var?con1?=?document.getElementById('con1');
			var?con2?=?document.getElementById('con2');			
			area.scrollTop?=?0;
			con2.innerHTML?=?con1.innerHTML;
			var?myScroll?=?setInterval("scrollUP()",?speed);
			area.onmouseover?=?function()?{
				clearInterval(myScroll);
			}
			area.onmouseout?=?function()?{
				myScroll?=?setInterval("scrollUP()",?speed);
			}
		}

			function?scrollUP()?{
				if?(area.scrollTop?>=?con1.scrollHeight)?{
					area.scrollTop?=?0;
				}?else?{
					area.scrollTop++;
				}
			}
			
		</script>
	</head>

	<body>
		<div?id="mooc">
			<h3?id="moocTitle">無縫滾動示例</h3>
			<div?id="moocbox">
				<ul?id="con1">
					<li>11111</li>
					<li>22222</li>
					<li>33333</li>
					<li>44444o</li>
					<li>55555</li>
					<li>66666</li>
					<li>77777</li>
					<li>88888</li>
					<li>99999</li>
				</ul>
				<ul?id="con2">

				</ul>
			</div>
		</div>
	</body>

</html>