JS模仿淘宝实现的简易推拉门效果码

本文描述了JS模仿淘宝实现的简单推拉门效果代码。分享给大家参考。具体如下：

这是一个简单的模仿淘宝推拉门效果的代码，个人感觉真的很不错。以前有一个类似的。在推拉门中，你可以重新布局你的网页，你可以把它做成一个超级强大的导航。原来的例子是拼音索引程序，也可以改成菜单。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-f-淘宝-simple-hdm-style-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title简单仿淘宝的一个不错的滑动门/title style type=' text/CSS ' body { font-size :12 px；位置：相对；font-family:Verdana，日内瓦，无衬线；} a { color : blue } ul { margin :0划水：0;列表式：无；} #导航{ height:26px} #导航li { float:left} #导航李.秀.内容{显示：块} #导航阿利，#导航Li span { display : inline-block；border : solid 1px # fffborder-bottom : none；高度：26 pxpadding:0 6px线高：20 px溢出：隐藏} #导航：悬停，#导航李。显示一个. index { background : # DBF3fe边框颜色： # 0a 0；位置：相对；top:0pxz索引：2;} #容器{位置：相对宽度宽度：800pxmargin:50px} #导航李.内容{ position : absolute eleft :0 top :26 pxbackground : # DBF3Feborder : solid 1px # 0a 0宽度宽度：760 pxpadding :20 pxdisplay : none } #导航李.内容ul Li { margin-right :10 px；float : none display : inline } #导航李.内容保险商实验所阿利{ border:none} #导航李.内容ul li { width:120px} #导航李.内容ul Li H3 { clear : both text-align : left；}/style/head dydiv id=' container ' ul id=' navigation ' lispan整站导航：/span/li阿利百度有啊/H3 ul lia百度。' com '百度有啊/a/li lia href='# '致富小康/a/li /ul h3脚本下载/h3 ul lia href='# '黄河泰山/a/li lia href='# '池鱼之殃/a/li lia href='# '百度有啊/a/li /ul /div /li阿利网页特效/H3乌尔利亚。JB 51。'净/角本/'网页特效/a/Li lia百度。' com '百度搜索/a/Li lia href=' http://MP 3。百度。' com '百度MP3/a/li /ul h3精品代码/h3 ul lia href='# '代码索引/a/li lia href='# '百度搜索/a/Li/ul/div/Li lia href=' # ' class=' index ' c/adiv class=' content ' c/div/Li lia href=' # ' index ' d/adiv class=' content ' d/div/Li lia href=' # ' class=' index ' e/div/Li lia href=' # ' content ' e/div/Li lia href=' # class=' index ' f/adiv class=' content ' f/div/Li lia href=' # ' class=' index ' lia href=' # ' class=' index ' j/adiv class=' content ' j/div/Li lia href=' # ' class=' index ' k/adiv class=' content ' k/div/Li lia href=' # class=' index ' l/adiv class=' content ' l/div/Li lia href=' # ' class=' index ' m/adiv class=' content ' m/div/Li/ul/div/body/html script type=' text/JavaScript '函数show var liObj=obj。 getelementsbytagname(' Li ')；var length=liobj . length var CurrentLiobFOr(var I=0；iLengtti){ CurrentLiobj=Liobj[I]；if(currentLiObj.parentNode！=obj){ 0继续；} //然后循环添加事件当前liobj。onmouseover=function(){ if(this。类名。indexof(' show ')0){ this。类名=' show} clearStyle(这个);} CurrentLioBj。onmouseout=function(){ this。类名=这个。类名。替换(' show '，' ')；clearStyle(这个);} }函数clearStyle(obj){ for(var I=0；iLengtti){ CurrentLiobj=Liobj[I]；如果(obj！=CurrentLobj){ CurrentLobj。类名=CurrentLobj。类名。替换(' show '，' ')；} } } } showAjaxContent()；/script希望本文所述对大家的Java脚本语言程序设计有所帮助。