今天来学习滑动门通用JS殊效（tab选项卡效果）
任何语言都有它的优越性，Div作为网页布局的标签，它可以很轻快的达到想要的效果，并且可以节约代码，我希望以后学这个标签的同学，要掌握它的每一个知识点，充分利用这个标签。[*]
[*]
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>滑动门通用JS</title><styletype="text/css"><!--body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}.bodyer{width:760px;margin:20pxautoauto;border:1pxdotted#ccc;background:#fff;}.t_rt{text-align:right;}h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}ul,li{margin:0px;padding:0px;}li{list-style-type:none;}h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1pxdotted#ccc;}.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}.cont{padding:10px;}.cls{clear:both;}.hidden{display:none;}#sourse{border:1pxdotted#ccc;width:600px;height:300px;margin:0pxauto;}.textDiv{margin:10px40px10px;text-align:center;}h2{margin:0px10px;background:#ccc;padding:5px;}.example{margin:10px;background:#FFF;border:1pxdotted#ccc;padding:10px;}.scrolldoorFrame{width:400px;margin:0pxauto;overflow:hidden;}.scrollUl{width:400px;border-bottom:1pxsolid#CCC;overflow:hidden;height:35px;}.scrollUlli{float:left;}.bor03{border:1pxsolid#ccc;border-top-width:0px;}.sd01{cursor:pointer;border:1pxsolid#CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}.sd02{cursor:pointer;border:0pxsolid#CCC;margin:5px;padding:2px;}--></style><scripttype="text/javascript">/*十三妖qq:181907667msn:wl181907667@hotmail.com邮箱:thirdteendevil@163.com*/functionscrollDoor(){}scrollDoor.prototype={sd:function(menus,divs,openClass,closeClass){var_this=this;if(menus.length!=divs.length){alert("菜单层数目和内容层数目纷歧样!");returnfalse;}for(vari=0;i<menus.length;i++){_this.$(menus).value=i;_this.$(menus).onmou搜索引擎优化ver=function(){for(varj=0;j<menus.length;j++){_this.$(menus).className=closeClass;_this.$(divs).style.display="none";}_this.$(menus).className=openClass;_this.$(divs).style.display="block";}}},$:function(oid){if(typeof(oid)=="string")returndocument.getElementById(oid);returnoid;}}window.onload=function(){varSDmodel=newscrollDoor();SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02");SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");}</script></head><body><divclass="bodyer"><h1class="t_rt">滑动门封装类</h1><h2>效果预览</h2><divclass="preview"><divclass="scrolldoorFrame"><ulclass="scrollUl"><liclass="sd01"id="m01">滑动门</li><liclass="sd02"id="m02">滑动门</li><liclass="sd02"id="m03">滑动门</li><liclass="sd02"id="m04">滑动门</li><liclass="sd02"id="m05">滑动门</li></ul><divclass="bor03cont"><divid="c01">第一层内容</div><divid="c02"class="hidden">第二层内容</div><divid="c03"class="hidden">第三层内容</div><divid="c04"class="hidden">第四层内容</div><divid="c05"class="hidden">第五层内容</div></div></div></div><divclass="preview"><divclass="scrolldoorFrame"><ulclass="scrollUl"><liclass="sd01"id="mm01">滑动门</li><liclass="sd02"id="mm02">滑动门</li><liclass="sd02"id="mm03">滑动门</li><liclass="sd02"id="mm04">滑动门</li><liclass="sd02"id="mm05">滑动门</li></ul><divclass="bor03cont"><divid="cc01">第一层内容</div><divid="cc02"class="hidden">第二层内容</div><divid="cc03"class="hidden">第三层内容</div><divid="cc04"class="hidden">第四层内容</div><divid="cc05"class="hidden">第五层内容</div></div></div></div><divclass="preview"><divclass="scrolldoorFrame"><ulclass="scrollUl"><liclass="sd01"id="mmm01">滑动门</li><liclass="sd02"id="mmm02">滑动门</li><liclass="sd02"id="mmm03">滑动门</li><liclass="sd02"id="mmm04">滑动门</li><liclass="sd02"id="mmm05">滑动门</li></ul><divclass="bor03cont"><divid="ccc01">第一层内容</div><divid="ccc02"class="hidden">第二层内容</div><divid="ccc03"class="hidden">第三层内容</div><divid="ccc04"class="hidden">第四层内容</div><divid="ccc05"class="hidden">第五层内容</div></div></div></div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
ie中母div被设置成特定高度之后，假如里面的子div高度（有float的话就以清除float的div的最底为总高度）超过了母div设置的高度,ie会自动把母div撑大，但是ff却不能，ff中母div的高度会依然，里面的子层会溢出到外面来。兼容方法：不要设置母层高度 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 可以使用 CSS 检查工具进行设计。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 可以使用 CSS 检查工具进行设计。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
页:
[1]