element隐藏或者显示

来源:互联网 发布:淘宝开店虚拟怎么做 编辑:程序博客网 时间:2024/05/22 03:22

<!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>

0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 宝宝戒奶晚上哭怎么办 宝宝戒奶半夜哭怎么办 吸习惯母乳不吸奶嘴怎么办 八个月宝宝奶睡怎么办 宝宝要吸着奶睡怎么办 戒母乳胸胀的疼怎么办 断奶孩子晚上哭的厉害怎么办 喜欢咬指甲的人怎么办? 成年了还咬指甲怎么办 戒奶乳房有硬块怎么办 戒奶七天有硬块怎么办 两岁宝宝喘气粗怎么办 两岁宝宝断不了奶怎么办 两岁宝宝不愿意喝奶粉怎么办 吃母乳不愿意吃奶粉怎么办 母乳宝宝不愿意喝奶粉怎么办 宝宝断母乳不喝奶粉怎么办 9个月宝宝不会爬怎么办 孩子五年级学习成绩差该怎么办 孩子临近中考学习成绩很差该怎么办 初中生成绩不好家长该怎么办 成绩差该怎么办贴吧 宝宝只会匍匐爬怎么办 一年级的孩子数学不好怎么办 小学一年级孩子数学不好怎么办 孩子上一年级数学太差怎么办 智商低情商也低怎么办? 孩子字写得很大怎么办 孩子拿笔重 写字太黑 怎么办 孩子语文成绩好数学不行怎么办? 孩子现在二年级特别叛逆怎么办 孩子又笨又蠢怎么办 四年级孩子数学计算能力差怎么办 孩子四年级数学理解能力差怎么办 孩子小学四年级数学很差怎么办 孩子做作业太慢怎么办 小学三年级数学成绩差怎么办 初一数学考了3分怎么办 初二物理太差该怎么办 三年级孩子字写的差怎么办 小学三年级数学才考86怎么办