今天来学习滑动门通用JS殊效（tab选项卡效果）

显示全部楼层 · 发表于 2015-1-16 10:37:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

任何语言都有它的优越性，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"></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[j]).className=closeClass;_this.$(divs[j]).style.display="none";}_this.$(menus[this.value]).className=openClass;_this.$(divs[this.value]).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的高度会依然，里面的子层会溢出到外面来。兼容方法：不要设置母层高度

显示全部楼层 · 发表于 2015-1-17 17:47:57

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

显示全部楼层 · 发表于 2015-1-21 08:56:40

可以使用 CSS 检查工具进行设计。

显示全部楼层 · 发表于 2015-1-30 13:00:47

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

显示全部楼层 · 发表于 2015-2-6 12:33:46

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

显示全部楼层 · 发表于 2015-2-16 04:54:55

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

显示全部楼层 · 发表于 2015-3-4 23:59:18

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

显示全部楼层 · 发表于 2015-3-11 22:04:05

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

显示全部楼层 · 发表于 2015-3-19 14:54:48

可以使用 CSS 检查工具进行设计。

显示全部楼层 · 发表于 2015-3-28 21:01:25

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 今天来学习滑动门通用JS殊效（tab选项卡效果）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子