本文实例讲述了JS+CSS实现带小三角指引的滑动门效果。分享给大家供大家参考。具体如下:
这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
滑动门
*{ margin:0; padding:0; font-size:12px;}
body{
padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
最新更新推荐下载下载排行本月排行基于JavaScript的气泡提示网页版C#调用OFFICE组件生成Excel表格示例iFrame 框架在多页面间相互传值的实例高亮显示代码的在线编辑器版《Java2核心技术卷2:高级特性》第7版中文高清 PDFVB餐厅POS收银软件VB餐厅POS收银软件VB 6.0 简体中文标准版Delphi加密隐藏或还原Windows盘符驱动器ImageVue 2.0 PHP+FLASH+XML高级相册VB商品零售进销存程序含MSSQL数据库文件jQuery 模块拖动,拖动层效果,可淡入淡出jQuery单行新闻滚动经典的jQuery多行文本滚动JS图片切换学习版,没有过多修饰漂浮广告代码,Js演示边滚边停的JS图片滚动递归读取数据库创建树控菜单的Delphi例子VB抓取DLL或EXE应用程序内的图标资源jQuery StartStopSlider 滚动切换插件jQuery EasyUI 实例演示(菜单、TAB等)VB+SQL2000考试卷(题库)生成与管理系统
var lis = document.getElementById("Tabs").getElementsByTagName("li");
var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
var order = 0;
for(var i=0; i
lis[i].value = i;
lis[i].onmouseover = function(){
ChangeTabs(this.value);
};
uls[i].className = "hidden";
}
lis[order].className = "cur";
uls[order].className = "block";
function ChangeTabs(nowTab){
lis[order].className = "";
uls[order].className = "hidden";
order = nowTab
lis[nowTab].className = "cur";
uls[nowTab].className = "block";
}
希望本文所述对大家的JavaScript程序设计有所帮助。
如果觉得《滑动门套滑动门css JS+CSS实现带小三角指引的滑动门效果》对你有帮助,请点赞、收藏,并留下你的观点哦!