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脚本语言程序设计有所帮助。
版权声明:js实现简洁的拉环滑动门效果代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。