JS CSS用小三角引导实现推拉门效果

本文通过一个实例来说明JS CSS如何实现小三角引导的推拉门效果。分享给大家参考。具体如下：

这是一个带有小三角导轨的JS CSS推拉门。有朋友说在IE6下看不到效果，但其实可以看到，因为小三角的颜色比较浅，有时候因为显示器的原因看不清楚。其实这个颜色是可以自己控制的，换个就行了。有了三角导向，整个推拉门的结构更加清晰，导向更加合理。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-sj-move-menu-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；charset=utf-8' /title滑动门/title style type=' text/CSS ' * { margin :0；划水：0;font-size :12 px}车身{ padding:30px }。tab sbox { width :400 pxmargin :20 px汽车；}.制表符{ height:20px}。标签li { width:80px文本对齐：居中；填充-top :2 px；行高：18 pxfloat:left背景色： # CCC右边距：5 px列表式：无；位置：相对；光标：指针指针；color: # 333}。选项卡li span { display:none}。标签cur {底色： # f0f 0；}.标签曲线跨度{ display:block宽度：1 pxheight :1 pxborder : solid 8pxborder-color : # f0f 0 # fff # fff # fff；位置：绝对；top:20pxleft:32px飞越：隐藏；z指数：-1;}.cons { height :120 pxpadding :8 px 12px飞越：隐藏；border:1px实心# f0f 0；位置：相对；z索引：1;}.李领事{列表式：无；线高：20 px}.隐藏{ display:none}。block { display : block }/style/head dydiv class=' tabsBox ' ul id=' tab ' class=' tab ' Li class=' cur '最新更新span/span/li li推荐下载span/span/li li下载排行span/span/li li本月排行span/span/Li/ul div id=' TabsCon ' class=' cons ' ul lia href=' # ' target=' _ blank '基于Java脚本语言的气泡提示网页版/a/lilia href=' # ' target=' _ blank ' c #调用办公室组件生成超过表格示例/a/lilia href=' # target=' _ blank ' iframe框架在多页面间相互传值的实例/a/lilia href='#' target='_blank '高亮显示代码的在线编辑器ASP .网版/a/lilia href=' # ' target=' _ blank ' 《Java2核心技术卷2:高级特性》第七版中文高清PDF/a/lilia href=' # ' target=' _ blank ' VB餐厅刷卡机收银软件/a/li/ul ul lia餐厅刷卡机收银软件/a/lilia href=' # ' target=' _ blank ' VB 6.0简体中文标准版/a/lilia href=' # ' target=' _ blank ' Delphi加密隐藏或还原Windows操作系统操作系统盘符驱动器/a/lilia href=' # target=' _ blank ' image vue 2.0 PHP FLash XML高级相册/a/lilia href=' # ' target=' _ blank ' VB商品零售进销存程序含MSSQL数据库文件/a/Li/ul ul lia模块拖动，拖动层效果，可淡入淡出/a/lilia href=' # ' target=' _ blank ' jquery单行新闻滚动/a/lilia href='#' target='_blank '经典的jQuery多行文本滚动/a/lilia href=' # ' target=' _ blank ' js图片切换学习版，没有过多修饰/a/lilia href='#' target='_blank '漂浮广告代码，Js演示/a/lilia href='#' target='_blank '边滚边停的射流研究…图片滚动/a/li/ul ul lia递归读取数据库创建树控菜单的德尔斐例子/a/lilia href=' # target=' _ blank ' VB抓取动态链接库或可执行程序的扩展名应用程序内的图标资源/a/lilia href=' # ' target=' _ blank ' jquery startstopsolider滚动切换插件/a/lilia href=' # ' target=' _ blank ' jquery Easyui实例演示（菜单、选项卡等)/a/lilia href=' # ' target=' _ blank ' VB SQL 2000考试卷（题库)生成与管理系统/a/Li/ul/div/div脚本类型=' text/JavaScript ' var lis=document。 getelementbyid(“制表符”).getElementsByTagName(' Li ')；var uls=文档。getelementbyid(' TabsCon ').getElementsByTagName(' ul ')；定义变量阶=0;for(var I=0；长度；i ){ lis[i].值=我；lis[i].onmouseover=function(){ ChangeTabs(这。值)；};uls[i].' className='隐藏；} lis[订单]。类名=' cur秩序。类名=' block函数变更标签(无标签){列表[顺序].类名=秩序'类名='隐藏；order=now选项卡列表[now选项卡].类名=' curuls[nowTab].类名=' block}/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。