本文介绍了一种使用JavaScript实现网页元素渐显渐隐效果的方法。通过计算元素的实际高度并逐步调整其高度属性，可以平滑地展示或隐藏指定的HTML元素。此技巧适用于网页设计中需要动态控制元素可见性的场景。
<!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=utf-8" />
<style>
*{ font:20px/25px arial;}
</style>
<title>无标题文档</title>
</head>
<body>
<a href="#" onclick="ShowHide('testdiv')">点击逐渐展开或收缩</a>
<div id="testdiv" style="background:#ccc;">
<p>a</p>
<p>b</p>
<p>sf</p>
<p>fs</p>
<p>fs</p>
<p>fs</p>
<p>fc</p>
</div>
<br/>
设计目的:将一个element隐藏或者显示<br/>
思路:<br/>
判断当前状态<br/>
隐藏状态(算出实际高度) -> 显示出来 -> 高度从0到实际高度<br/>
显示状态 -> 高度从实际高度到0 -> 隐藏
<script language="javascript" type="text/javascript">
//取得ID节点
function $(id){return(document.getElementById(id))}
//取得实际高度
function coculateOffset(ele){
var node = $(ele);
var orignalHeight = node.style.height;
var orignalDisplay = node.style.display;
node.style.height = "";
node.style.display = "block";
var h = node.offsetHeight;
node.style.height = orignalHeight;
node.style.display = orignalDisplay;
return(h);
}
//显示元素
function showEle(ele){
var h = coculateOffset(ele)
var i = 1;
var t = setInterval(function(){
i += i;
$(ele).style.height = i + "px";
$(ele).style.display = "";
if( i > h/2){
$(ele).style.height = h + "px";
clearInterval(t);
}
},35)
}
//隐藏元素
function hideEle(ele){
var h = coculateOffset(ele);
var t = setInterval(function(){
if(h > 2){
h = h/2;
}else{
h = 0;
clearInterval(t);
}
$(ele).style.height = h + "px";
},50)
}
//判断显隐
function ShowHide(ele){
var currentHeight = $(ele).style.display == "none" ? 0 : $(ele).offsetHeight;
$(ele).style.overflow = "hidden";
if(currentHeight > 0){
hideEle(ele);
}else{
showEle(ele);
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
