Scripts 学盟
标题:
手风琴 accordian.pack.js
[打印本页]
作者:
嘟嘟
时间:
2011-7-12 10:50:23
标题:
手风琴 accordian.pack.js
本帖最后由 嘟嘟 于 2011-7-12 10:56 编辑
声名：这个js 是某网站手风琴特效 （如有问题：请加群：14791694 联系：嘟嘟）
2011-7-12 10:46:45 上传
下载附件
(23.55 KB)
tree
.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" /> 购买建科研系列软件</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" /> <a href="ProductAndSolution.aspx?tpid=1">了解相关产品</a></div>
<div>
<img src="img/建科研首页_21-23.gif" style="vertical-align: middle" /> <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" /> 提高管理和办公效率</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">
</div>
<div style="float: right">
<div>
<h2>
以先进的信息化手段<br />
提高工作效率</h2>
</div>
<div>
<img src="img/建科研首页_21-23.gif" style="vertical-align: middle" /> <a href="ProductAndSolution.aspx?tpid=3">了解政府信息化</a></div>
<div>
<img src="img/建科研首页_21-23.gif" style="vertical-align: middle" /> <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" /> 掌握更多软件使用技巧</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" /> <a href="UserTran.aspx">参加培训</a></div>
<div>
<img src="img/建科研首页_21-23.gif" style="vertical-align: middle" /> <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" /> 加入建科研</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" /> <a href="About.aspx?classid=13">加入建科研</a></div>
<div>
<img src="img/建科研首页_21-23.gif" style="vertical-align: middle" /> <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>
附件: [tree]
tree.jpg
(2011-7-12 10:46:45, 23.55 KB) / 下载次数 141
http://www.iscripts.org/forum.php?mod=attachment&aid=MTIzfGU1NjczNjRmfDE3MzQ2MDE1NDR8MHww
欢迎光临 Scripts 学盟 (http://www.iscripts.org/)
Powered by Discuz! X2
附件: [tree] tree.jpg (2011-7-12 10:46:45, 23.55 KB) / 下载次数 141