js实现左侧网页标签滑动门效果代码

本文实例讲述了射流研究…实现左侧网页标签滑动门效果代码。分享给大家供大家参考。具体如下：

这是一款开口靠左的网页滑动门，网页滑动门，TAB滑动门，竖排滑动门菜单，竖排拉环选项卡，兼容IE6/IE7/FF/opera浏览器。其实竖排和横排的代码基本一样，只不过稍加修改就可以了。只要学会了一种滑动门，就能举一返三了。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

！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；字符集=GB 2312/标题竖排的选项卡/title meta name=' keywords ' content=' '/style type=' text/CSS ' body { font-size :12 px；字体系列： '露西达格兰德，弗达那，露西达，阿里亚尔，Helvetica，宋体，无衬线字体；}a:link，a:visited，a:hover，a : active { text-decoration : none；color: # 256bae}。翘曲{宽度：586像素高度：269像素！重要；高度：271像素边界：1像素实心# dbdcd7}。主{宽度：562px高度：269像素！重要；高度height:271pxpadding:5px边距-左侧：15像素；飞越：隐藏；float:left}。新闻{ position:absolutez索引：4;宽度：24 px}.新闻ul {列表式：无；划水：0;margin:0}。新闻ul li{ height:84px！重要；高度：88 px宽度：20 px边距-底部：0 px填充-top :5 px；文本对齐：居中；光标：指针指针；垂直对齐：毫米；背景-color : # e5e5e 5；右边框： # dbdcd 7实心1px边框-底部： # dbdc D7实心1px}.新闻ul Li。在{底色： # ffffffborder:#FFFFFF 0px} .新闻跨度{显示：块页边距-top:9px！重要；页边距-顶部：20 px}.dis { display:block}。undis { display:none}/style脚本类型='text/javascript '函数g(o){返回文档。getelementbyid(o)；}函数HeavLi(m，n，counter){ for(var I=1；I=计数器；i ){g('tb_' m i).类名=g(' TBC _ m ' I).不扩散(待定).dist(' TB _ m ' n).类名=' on}/脚本/header dystrong兼容IE6/IE7/FF/opera/strong brbr div class=' warp ' div class=' news ' ul Li class=' on ' id=' TB _ 11 ' on mouse over=' HeaLTH Li(1，1，3)；跨度企业新闻/span/Li Li class=' id=' TB _ 12 ' on mouse over=' HeaLTH LI(1，2，3)；跨度业内咨讯/span/Li Li class=' id=' TB _ 13 ' on mouse over=' HeaLTH LI(1，3，3)；跨度业内咨讯/span/Li/ul/div class=' dis ' id=' TBC _ 11 ' div class=' main ' 1br企业新闻的内容1br企业新闻的内容1br企业新闻的内容1/div/div class=' undi ' id=' TBC _ 12 ' div class=' main ' 2br业内咨讯的内容2br业内咨讯的内容2br业内咨讯的内容2br/div/div class=' undi ' id=' TBC _ 13 ' div class=' main ' 3br业内咨讯的内容3br业内咨讯的内容3br业内咨讯的内容3br/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。