手风琴 accordian.pack.js

声名：这个js 是某网站手风琴特效 （如有问题：请加群：14791694   联系：嘟嘟）

.basic-accordian
        {
            height: 251px;
        }
        
        .accordion_headings
        {
            padding: 5px;
            background: #75B9E0;
            color: #FFFFFF;
            border: 0px solid #FFF;
            cursor: pointer;
            font-weight: bold;
        }
        
        .accordion_child
        {
            padding: 7px;
            background: #FFFFFF;
            height: 88px;
        }
        
        .header_highlight
        {
            background: #75B9E0;
        }
        .imgIcon
        {
            vertical-align: middle;
            width: 15px;
            height: 15px;
        }



js

function $(d) {
    return document.getElementById(d);
}
function g(d, v) {
    if (v == undefined) {
        if (d.style.display != "none" && d.style.display != "") {
            return d.offsetHeight;
        }
        o = d.style.display;
        d.style.display = "block";
        v = parseInt(d.offsetHeight);
        d.style.display = o;
        return v;
    } else {
    d.style.height = v + "px";
    }
}
function of(d, v) {
    g(d, v);
    v = v / d.h;
    d.style.opacity = v;
    d.style.filter = "alpha(opacity=" + v * 100 + ")";
}
function b(d) {
    d = $(d);
    z = g(d);
    x = d.h;
    if (z > 0) {
        v = Math.round(z / d.s);
        v = (v < 1) ? z - 1 : z - v;
        of(d, v);
    } else {
        g(d, 0);
        d.style.display = "none";
        clearInterval(d.t);
    }
}
function e(d) {
    d = $(d);
    z = g(d);
    x = d.h;
    d.style.display = "block";
    if (z < x) {
        v = Math.round((x - z) / d.s);
        v = (v < 1) ? z + 1 : v + z;
        of(d, v);
    } else {
        g(d, x);
        clearInterval(d.t);
    }
}
function Accordian(d, s, f) {
    l = $(d).getElementsByTagName("div");
    a = [];
    for (i = 0; i < l.length; i++) {
        d = l;
        if (d.id.substr(d.id.indexOf("-"), d.id.length) == "-content") {
            a.push(d);
        }
    }
    x = null;
    for (i = 0; i < l.length; i++) {
        (function (h) {
            c = h.id.substr(0, h.id.indexOf("-"));
            if (c + "-header" == h.id) {
                c = $(c + "-content");
                c.style.display = "none";
                c.style.overflow = "hidden";
                c.h = g(c);
                c.s = (s == undefined) ? 7 : s;
                h.f = f;
                h.c = a;
                if (h.className.match(new RegExp(f + "+"))) {
                    x = h;
                }
                h.onclick = function () {
                    for (j = 0; j < this.c.length; j++) {
                        n = this.c[j].id;
                        n = n.substr(0, n.indexOf("-"));
                        d = $(n + "-header");
                        n = $(n + "-content");
                        s = d.className.split(new RegExp(" \\s+"));
                        for (p = 0; p < s.length; p++) {
                            if (s[p] == "" + d.f) {
                                s.splice(p, 1);
                                d.className = s.join(" ");
                                break;
                            }
                        }
                        clearInterval(n.t);
                        if (d.id == this.id) {
                            if (n.style.display == "none") {
                                g(n, 0);
                                n.t = setInterval('e("' + n.id + '")', 9);
                            }
                            d.className += " " + d.f
                        } else {
                            if (n.style.display == "block") {
                                n.t = setInterval('b("' + n.id + '")', 9);
                            }
                        }
                    }
                }
            }
        })(l)
    }
    if (x != null) {
        x.onclick()
    }
}



<div class="bannerr">
                <div style="height: 47px; background-color: transparent">
                </div>
                <div id="basic-accordian">
                    <div style="border: 1px solid #FFF;">
                        <div id="test0-header" class="accordion_headings header_highlight"><div style="height:19px" onclick="clickThinkHeader(1)"><img id="hImg1" src="Img/banp.gif" class="imgIcon" />&nbsp;购买建科研系列软件</div></div><div id="test0-content"><div class="accordion_child"><div style="float: left">
        <img src="img/r1.jpg" style="height: 95px" /></div>
<div style="float: right">
        <div>
                <h2>
                        选择一款适合您的产品</h2>
        </div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="ProductAndSolution.aspx?tpid=1">了解相关产品</a></div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="About.aspx?classid=10">联系购买</a></div>
</div>
</div></div><div id="test1-header" style="border-top-color:#FFF; border-top-style:solid; border-top-width:1px;" class="accordion_headings header_highlight"><div style="height:19px" onclick="clickThinkHeader(2)"><img id="hImg2" src="Img/banp.gif" class="imgIcon" />&nbsp;提高管理和办公效率</div></div><div id="test1-content"><div class="accordion_child"><div style="float: left">
        <img src="img/r2.jpg" style="height: 95px" /></div>
<div style="float: left">
        &nbsp;</div>
<div style="float: right">
        <div>
                <h2>
                        以先进的信息化手段<br />
                        提高工作效率</h2>
        </div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="ProductAndSolution.aspx?tpid=3">了解政府信息化</a></div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="ProductAndSolution.aspx?tpid=4">了解企业信息化</a></div>
</div>
</div></div><div id="test2-header" style="border-top-color:#FFF; border-top-style:solid; border-top-width:1px;" class="accordion_headings header_highlight"><div style="height:19px" onclick="clickThinkHeader(3)"><img id="hImg3" src="Img/banp.gif" class="imgIcon" />&nbsp;掌握更多软件使用技巧</div></div><div id="test2-content"><div class="accordion_child"><div style="float: left">
        <img src="img/r3.jpg" style="height: 95px" /></div>
<div style="float: right">
        <div>
                <h2>
                        更好的使用建科<br />
                        研软件</h2>
        </div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="UserTran.aspx">参加培训</a></div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="Question.aspx">答疑解惑</a></div>
</div>
</div></div><div id="test3-header" style="border-top-color:#FFF; border-top-style:solid; border-top-width:1px;" class="accordion_headings header_highlight"><div style="height:19px" onclick="clickThinkHeader(4)"><img id="hImg4" src="Img/banp.gif" class="imgIcon" />&nbsp;加入建科研</div></div><div id="test3-content"><div class="accordion_child"><div style="float: left">
        <img src="img/r4.jpg" style="height: 95px" /></div>
<div style="float: right">
        <div>
                <h2>
                        建科研和你共同成长</h2>
        </div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="About.aspx?classid=13">加入建科研</a></div>
        <div>
                <img src="img/建科研首页_21-23.gif" style="vertical-align: middle" />&nbsp;<a href="About.aspx?classid=11">成为建科研的合作伙伴</a></div>
</div>
</div></div>
                    </div>
                    <div id="divBottom" class="accordion_headings header_highlight" style="height: 17px;border: 1px solid #FFF;border-top-width:0px;">
                    </div>
                </div>