javaｓｃｒｉｐｔ实现的切换效果实例分析

本文阐述了切换效果Div. Share Javaｓｃｒｉｐｔ实现你供你参考。具体分析如下：
函数$（obj）
{
返回document.getelementbyid（obj）；
}
ToggleDiv（）函数
{
This.ToggleId='silder'; / / is telescopic object ID
本。ParentID = 'container'； / /伸缩对象的父ID
这个minheight = 1； / /最小高度
这个最大高度= 200； / /最大高度
这个。速度= 1；膨胀率
这个。偏移量= 0.15； /偏移量
加载=函数（）
{
如果（$（这个。toggleid）。风格。显示= =不关的） / /如果是隐藏的开放
{
StartToggle（打开'，this.toggleid，this.parentid，this.minheight，this.maxheight，this.speed，这个偏移）；
}
否则，如果打开隐藏
{
StartToggle（'关闭'，this.toggleid，this.parentid，this.minheight，this.maxheight，this.speed，这个偏移）；
}
}
}
函数的StartToggle（法，toggleid，ParentID，minheight、最大高度、速度、偏移）
{
如果（typeof（法）= 'String'（方法。toLowerCase）= =| |！）
{
方法：打开；
}
如果（method.tolowercase（）= =‘'）
{
var AddSpeed=速度+偏移；
无功openfun =功能（）
{
无功originheight = $（toggleid）。offsetheight = = 01：$（toggleid）。OffsetHeight；
VaR的新高度= originheight + AddSpeed；
AddSpeed= AddSpeed+偏移；
如果（parseInt（提高）< parseInt（最大高度））
{
$（toggleid）。风格。高度=新的高度+ 'px；
$（toggleid）。风格显示=阻止；
}
如果（parseInt（提高）> = parseInt（最大高度））
{
$（toggleid）。风格。高度=最大高度+ 'px；
$（toggleid）。风格显示=阻止；
$（ParentID）.innerHTML = 'contraction；
window.clearinterval（addtimer）；
}
}
无功addtimer = window.setinterval（openfun，100）；
}
如果（method.tolowercase（）= = '关闭'）
{
var AddSpeed=速度+偏移；
无功reducefunction =功能（）
{
无功originheight = $（toggleid）。OffsetHeight；
VaR的新高度= originheight AddSpeed；
AddSpeed= AddSpeed+偏移；
如果（parseInt（提高）> parseInt（minheight））
{
$（toggleid）。风格。高度=新的高度+ 'px；
$（toggleid）。风格显示=阻止；
}
其他的
{
$（toggleid）。风格显示=不关；
$（toggleid）。风格高度= '1px；
$（ParentID）.innerHTML = 'expansion；
Window.clearInterval (reducetimer);
}
}
无功reducetimer = window.setinterval（reducefunction，100）；
}
}
函数的DoToggle（obj1，obj2）
{
VaR TOG =新ToggleDiv（）；
toggleid =以此为主的；
ParentID = obj2为主的；
为主的。minheight = 5；
最大高度= 110为主的；
速度= 10为主的；
偏移量= 3为主的；
Tog.load（）；
}
示例如下：
正常开放

膨胀效应
膨胀效应
膨胀效应
伸缩效应与膨胀效应
膨胀效应

代码中的一些代码是多余的或重复的。

以下是这次演习的一些经验总结：

1、在风格的阅读对象的offsetheight价值。显示= 'none'and风格。能见度=隐藏的将是不同的。

风格。显示= 'none'reads它，这将是0，而风格。能见度=隐藏的读offsetheight当对象被加载，如108。

2、对style.height值不是一个整数或数字型。别忘了，它是一个单位，如108px 而不是108

3、setTimeout和setInterval

他们都有使用两种方法，以将为例：

方法1：setTimeout（功能、区间，args）参数的函数名或匿名函数。参数2是时间间隔，参数3到n是调用函数的参数。

setTimeout（函数（）{ alert（' '）；}，1000）setTimeout（getstr，1000，'mcjeremy）

方法二：setTimeout（对象、函数、区间）参数是对象调用，参数2是对象中的方法和参数3是时间间隔。

有一个有趣的东东：
函数A（）
{
setTimeout（函数（）{ alert（' '）；}，0）；
警报（2'）；
}

猜输出的结果是什么

答案：21，不是12。这是因为JS函数的执行，也有栈的其他编程语言一样的。警报（1）因为setTimeout，所以最终执行。我不知道我是否理解正确。

完成工作！

希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。