JavaScript点击链接滑出下拉列表_文本链接特效

JavaScript点击链接滑出一个下拉列表框，这里的下拉列表框是在一个DIV层内部，因此是用Js控制DIV动画展开的一个功能，这里没有用到那些JS插件，纯JS代码实现，不过代码稍嫌多。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>JavaScript点击文字滑出下拉列表- mb5u.com</title>
	<style type="text/css">
	/* Start of css that is not needed for the script */
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-top:0px;
		background-image:url('../../images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:100px;
	}
	p{
		margin-top:0px;
	}
	a{
		color:#660000;
		text-decoration:none;

}	
	/* End of css that is not needed for the script */
	
	/* Don't delete anything below here */
	.dhtmlgoodies_mrcBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:250px;
				
	}
	.dhtmlgoodies_mrc{
		position:relative;		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		width:100%;
		font-size:0.8em;
		
	}

</style>
<script type="text/javascript">
var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();
	var slidedownActive = false;
	var mrcHeight = false;
	var slidedownSpeed = 3; 	// Higher value = faster script
	var slidedownTimer = 7;	// Lower value = faster script
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
		
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='dhtmlgoodies_mrc')slidedownContent = subDivs[no];	
		}

mrcHeight = slidedownContent.offsetHeight;
	
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{

if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>mrcHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - mrcHeight + 'px';

setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
	}
	
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;
		
	}
	</script>

</head>
<body>
<div>
	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;">Try it</a></div>
	<div class="dhtmlgoodies_mrcBox" id="box1">
		<div class="dhtmlgoodies_mrc" id="subBox1">
			
			This is the mrc we want to show<br>
			This is the mrc we want to show<br>
			This is the mrc we want to show<br>
			This is the mrc we want to show
			
		</div>
	</div>
</div>
<div>
Other mrc<br>
Other mrc<br>
Other mrc<br>
<div>
<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box2');return false;">Try another box</a></div>
	<div class="dhtmlgoodies_mrcBox" id="box2">
		<div class="dhtmlgoodies_mrc" id="subBox2">
			
			This is the mrc of another box<br>
			
		</div>
	</div>
</div>
<script type="text/javascript">
setSlideDownSpeed(4);
</script>
</body>
</html>

所属频道：文本链接特效/更新时间：2012-12-10

[收藏][报错][返回列表]

JavaScript点击链接滑出下拉列表_文本链接特效

文本链接特效Rss订阅特效代码搜索

文本链接特效推荐

猜你也喜欢看这些