舒卷效果-JavaSript-爱易网页

舒卷效果

日期：2014-05-16　浏览次数：20505 次

伸缩效果



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

<style type = "text/css">



#para{

		position:absolute;

		left:100px;

		top:10px;



		width:400px;

		height:400px;



		border:1px solid #0000ff;

		background-color:#ffff00;



		clip:rect(0px,400px,400px,0px);



		overflow:auto;

	 }



p{text-indent:20px;}





</style>

<script type = "text/javascript">

var bottom = 400;

var clipped = false;



function testItem()

{

	if ( clipped ) unClipItem();

	if (!clipped ) clipItem();

}



function clipItem()

{

	bottom -= 20;



	var clipShape = " rect(0px,400px," + bottom + "px,0px)";

//

	var nodeText = document.getElementById("para");

	nodeText.style.clip = clipShape;



	if (nodeText.offsetHeight >= bottom ) nodeText.style.overflow = "scroll";

	



	if ( bottom <= 40 ) clipped = true;

	else

	setTimeout("clipItem()",500);

}



function unClipItem()

{

	bottom += 20;

	var clipShape =" rect(0px,400px," + bottom + "px,0px)";

	var nodeText = document.getElementById("para");

	nodeText.style.clip = clipShape;



	if ( bottom >= 400 ) clipped = false;

	else

	setTimeout("unClipItem()", 1000);



}



document.onclick = testItem();

</script>

 </head>



 <body>



  <div id="para">

  <p>European stocks were sluggish Tuesday after a key measure of German investor confidence fell, with Germany's DAX flat at 9,659.78. France's CAC 40 fell 0.1 percent to 4,330.71 while Britain's FTSE 100 added 1 percent to 6,802.61.</p>



<p>Benchmark U.S. oil for March delivery was up 31 cents to $102.74 a barrel in electronic trading on the New York Mercantile Exchange. The contract gained $2.13 overnight to $102.43.</p>

 </div>



 </body>

</html>

------解决方案--------------------

引用:

第43行：var nodeText = document.getElementById("para");

一直显示nodeText is null;

js放在<div id="para">之后因为代码是从头往下执行的当执行到var nodeText = document.getElementById("para");的时候<div id="para">还没加载到所以也就找不到para这个元素就会报错

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

舒卷效果

相关资料更多>

推荐阅读更多>