JavaScript实现点击文字链接弹出自定义的下拉列表

2009-01-06 21:30:59 | 【大中小】

This is the content we want to show
This is the content we want to show
This is the content we want to show
This is the content we want to show
This is the content we want to show
This is the content we want to show

Other content
Other content
Other content
Other content
Other content
Other content
Other content
Other content
Other content
Other content
Other content

Try another box

This is the content of another box
This is the content of another box
This is the content of another box

本脚本演示了点击文字链接后会在文字链接的下方慢慢拉出一个自定义的列表，可以实现dropdown控件的功能，但是现实效果更佳丰富

查看全部代码 View Code

在网页<head>区添加以下代码

<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_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:250px;
				
	}
	.dhtmlgoodies_content{
		position:relative;		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		width:100%;
		font-size:0.8em;
		
	}


	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, September 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	See http://www.dhtmlgoodies.com/index.html?page=termsOfUse
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/		
	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();

	var slidedownActive = false;
	var contentHeight = 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_content')slidedownContent = subDivs[no];	
		}

		contentHeight = 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]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';

		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);	// Choose a lower value than 10 to make the script move faster
	}
	
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;
		
	}
	</script>

在网页<body>区添加以下代码


<div>
	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;">Try it</a></div>
	<div class="dhtmlgoodies_contentBox" id="box1">
		<div class="dhtmlgoodies_content" id="subBox1">
			<!-- slide down content goes here -->
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show
			<!-- End slide down content -->
		</div>
	</div>
</div>
<div>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
<div>
	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box2');return false;">Try another box</a></div>
	<div class="dhtmlgoodies_contentBox" id="box2">
		<div class="dhtmlgoodies_content" id="subBox2">
			<!-- slide down content goes here -->
			This is the content of another box<br>
			This is the content of another box<br>
			This is the content of another box<br>
	
			<!-- End slide down content -->
		</div>
	</div>
</div>
<script type="text/javascript">
setSlideDownSpeed(4);
</script>

调用方法
列表框的内容
把你自己的内容放到  下方即可

下面是一个内容区的简单范例:

<a href="#" onclick="slidedown_showHide('box1');return false;">Try it</a>

"box1" 是下拉框的ID.

配置
可以通过JavaScript函数调整下拉框的出现速度

setSlideDownSpeed(newSpeed) - newSpeed表示速度

你可以通过修改CSS样式表，来修改下拉框的外观

下载"JavaScript实现点击文字链接弹出自定义的下拉列表"

推荐给朋友

上一篇： JavaScript打字机效果
下一篇：带滚动条的Div

JavaScript实现点击文字链接弹出自定义的下拉列表

下载"JavaScript实现点击文字链接弹出自定义的下拉列表"

相关资源