js实现简洁的拉环滑动门效果代码

本文实例讲述了射流研究…实现简洁的拉环滑动门效果代码。分享给大家供大家参考。具体如下：

这是一款滑动门代码，简洁TAB、简单的鼠标导航效果，大家或许经常见到的效果啦，鼠标放在主菜单上，下边框架内的内容会跟着变换，鼠标不需要点击，只需要滑上去就可切换内容，像一扇门，所以有时候别人叫"滑动门"菜单。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/

具体代码如下：

htmlhead标题简洁标签/标题脚本类型='text/javascript '函数nTabs(thisObj，Num){ if(this obj。类名=' active ')返回；var TabObj=THiObj。ParentNode。id；//赋值指定节点的父节点的编号名字var tabList=文档。getelementbyid(TabObj).getElementsByTagName(' Li ')；for(I=0；i tabList.lengthi ) {//点击之后，其他标签变成灰色，内容隐藏，只有点击的标签和内容有属性if(I==Num){ thisObj。类名=' active文件。getelementbyid(' taobj ' _ Content ' I)。风格。display=' block} else { tabList[i].normaldocument .getelementbyid(' taobj ' _ Content ' I)。风格。显示='无'；} } }/脚本样式类型=' text/CSS ' * { margin 3360 0；padd : 0；列表样式：无；font-size : 14px} .nTab {宽度： 500像素高度：200 px余量： 20px自动；border: 1px固体# 333;飞越：隐藏；} .无{显示：无；} .nTab .TabTitle li {左侧浮动：光标：指针；高度： 35px线高： 35px字体粗细：粗体；文本对齐：中心；宽度： 124像素；} .nTab .阿利{文本-装饰：无；} .nTab .TabTitle .活动{背景色：蓝色；color: # 336699}。nTab .TabTitle .正常{ color: # F1AC1C}。nTab .TabContent { clear:两者；飞越：隐藏；背景# fffpadding : 5pxdisplay :块；高度：100 px}/style/head body div class=' NtaB ' div class=' TabTitle ' ul id=' MyTab ' Li class=' active ' on mouse over=' NtaBs(this，0)；ASP/Li Li class=' normal ' on mouse over=' ntaBs(this，1)；PHP2/Li Li class=' normal ' on mouse over=' ntaBs(this，2)；PHP3/Li Li class=' normal ' on mouse over=' ntaBs(this，3)；PHP4/Li/ul/div class=' TabContent ' div id=' MyTab _ Content 0 '第一块内容/div div id=' myTab _ content 1 ' class=' none '第二块内容/div div id=' myTab _ content 2 ' class=' none '第三块内容/div div id=' myTab _ content 3 ' class=' none '第四块内容/div /div /div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。