JS CSS实现简易的滑动门效果代码

本文实例讲述了JS CSS实现简易的滑动门效果代码。分享给大家供大家参考。具体如下：

看了很多的滑动门和滑动菜单的资料，总算写出来了一个像样的滑动门，虽然外观不怎么样，但可以兼容火狐，还请老前辈们不要笑话，以后有好多西再请大家批评。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-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 style * { margin 33600 px；padd :0 pxfont-size :9 pt；} # tab { width :400 pxh three : auto margin :0 auto } ul { list-style : none；左边距left :20 px } Li { float : left高度：30 px背景： URL(15。jpg)；余量：0 5px文本对齐：居中；线高：30 px颜色： # 293863宽度：60 px位置：相对；底部：-3px；}/*边距；那里调节各个里之间的距离，位置是保证下边框的出现*/.dise { display:block}。未显示{ display:none}。背景：网址(图像/tr。jpg)；} # all { clear:left宽度宽度：400px} #所有分区{宽度：400px背景-颜色： # F2F5FA向左文本对齐：线高：20 px高度：200 pxborder:1px #CCCDCD固体；}/*一定要设border */}/style/head脚本语言=' JavaScript '函数g(o){返回文档。getelementbyid(o)；}函数showdiv(I){ for(j=1；j=3；j ){g('div' j).class NAmE='在'//下将三个都设为毫不掩饰，以便将来可以设置显示的那个；g('li' j).className=''//消除原来所有里的属性}g('div' i).dise'g('li' i)。函数显示div 1(I){ for(j=4；j=6；j ){g('div' j).class NAmE='在'//下将三个都设为毫不掩饰，以便将来可以设置显示的那个；g('li' j).className=''//消除原来所有里的属性}g('div' i).dise'g('li' i)。类名=' fff ' }/脚本正文div id=' tab ' ul Li id=' li1 ' class=' fff ' span on mouse over=' showdiv(1 ')世界的中国/span/Li Li id=' li2 '鼠标悬停时的span=' showdiv(2)'网页特效/span/Li Li id=' Li ' span on mouse over=“showdiv(3)”脚本代码/span/Li/ul div id=' all ' div id=' div 1 ' class=' dise '学习型源码下载站/div div id=' div 2 ' class=' undee '精选网页特效，应有尽有~/div div id=' div 3 ' class=' undse '高质量脚本代码资源随您下载！ /div /div /div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。