本文为大家分享的第一个实例：JS控制差异层的展开、收缩效果。

htmlheadtitleCSS JS实现一个差异层的展开/折叠效果/title style * { margin 33600；划水：0;}正文{ text-align :居中；Helvetica阿里亚尔省凡尔达纳市，邮编：75，无衬线；}h1 { font:125% Arial，Helvetica，无衬线；向左文本对齐：字体粗细：加粗；背景： # 555;padding:3px显示：块；颜色： # 99cc 00 }。1类{宽度：40%；背景： # CCCCCC；位置：相对；margin :0 auto adding :5 px } span { position : absolute eright :10 xtop :8 pxcursor : pointer指针；颜色：黄色；} p { text-align : left线高：20 px背景： # 555;padd :3 pxmargin-top :5 px；颜色： # 99cc 00 } #类内容{高度：256 px溢出：隐藏}/style脚本函数$(element){ return element=document。getelementbyid(元素)；} function $ D(){ var D=$(' class 1 content ')；var h=d.offsetHeightvar maxh=300函数DM love(){ h=50；//层展开速度if(h=maxh){ d . style。高度=' 300像素'；clearInterval(iIntervalId)；} else { d . style。display=' block风格。高度=h ' px} } iIntervalId=set interval(DM ov，2)；} function $ D2(){ var d=$(' class 1 content ')；var h=d.offsetHeightvar maxh=300函数DM love(){ h-=50；//层收缩速度if(h=0){ d . style。显示='无'；clearInterval(iIntervalId)；} else { d . style。高度=h ' px} } iIntervalId=set interval(DM ov，2)；} function $ use(){ var d=$(“class 1 content”)；var sb=$(' state but ')；如果(D .风格。display==' none '){ $ D()；sb.innerHTML='收缩；} else { $ D2()；sb.innerHTML='展开；} }/script/head dydiv id=" state但" onclick=" $ use()"收缩/spanp id='class1content '我们/p/div/body效果图：

第二个实例：js控制展开折叠

html头元http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 ' TItle TItle/TItle/head body！射流研究…控制展开隐藏div-img src=' http :图像/向下。png ' onclick=' test(this)'！-这个指img对象-div id=' div 2 ' style=' border :1 px solid # CCC；宽度宽度：300像素高度：200 pxdisplay: block'(1)每个超文本标记语言标记都有事件句柄属性点击。是超文本标记语言标记属性，不分大小写(2)超文本标记语言标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因射流研究…区分大小写/div/body/html脚本类型=' text/JavaScript '函数测试(obj){ var div 1=document。getelementbyid(' div 2 ')；if(div 1。风格。display==' block '){ div 1。风格。显示='无'；物体。src=' http : image/up。png '；} else { div 1。风格。display=' block物体。src=' http :图像/关闭。png '；} }/脚本以上就是本文的全部内容，希望对大家的学习有所帮助。