本脚本演示了点击文字链接后会在文字链接的下方慢慢拉出一个自定义的列表，可以实现dropdown控件的功能，但是现实效果更佳丰富
<!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" content="text/html; charset=gb2312" />
<title>JavaScript实现点击文字链接弹出自定义的下拉列表 - 分享JavaScript-sharejs.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_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>
</head>
<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>
<br><br>
<div align="center">
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
</div>
</body>
</html>
