JS+CSS实现自适应选项卡宽度的圆角滑动门效果


Posted in Javascript onSeptember 15, 2015

本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果。分享给大家供大家参考。具体如下:

这是一款JS+CSS打造自适应宽度的圆角滑动门,这里的圆角主要是靠一张背景图片去实现,所指的宽度是滑动门上的导航的宽度,不管文字有多少,它都会一直顺着下去,不会被内容所撑破,兼容性方面,兼容IE6/7/8,火狐未试,应该也兼容 。

运行效果截图如下:

JS+CSS实现自适应选项卡宽度的圆角滑动门效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自适应宽度的滑动门</title>
<style type="text/css">
html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}
body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0}
ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px}
a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline}
.Tab{height:100%;text-align:left}
.Tab .title,.Tab .title div,.Tab .title .n1,.Tab .title .n1 span,.Tab .title .n2,.Tab .title .n2 span{background:url("images/tab_bg.gif") no-repeat left top}
.Tab .title{height:30px;padding-left:10px}
.Tab .title div{background-position:right top;display:block;height:100%}
.Tab .title .n1,.Tab .title .n2{background-position:left bottom;height:26px;line-height:26px; display:block;float:left;text-align:center;padding-left:12px;margin-top:4px;margin-left:1px;color:#333; text-decoration:none}
.Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px}
.Tab .title .n2{background-position:left -30px}
.Tab .title .n2 span{background-position:right -30px}
.tabcon ul{margin:5px auto;padding:0}
.tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$('"+Xname+i+"').className='n2'");}eval("$('"+Xname+j+"').className='n1'");for(i=1;i<Lenght;i++){eval("$('"+Cname+i+"').style.display='none'");eval("$('"+Cname+j+"').style.display='block'");}}
</script>
</head>
<body>
<div style="width:500px;margin:0 auto">
<p>onmouseover事件</p>
<div class="Tab">
 <div class="title">
 <a href="#" id="a1" class="n1" onmouseover="Tab('a','ax',6,1)"><span>ASP</span></a>
 <a href="#" id="a2" class="n2" onmouseover="Tab('a','ax',6,2)"><span>PHP</span></a>
 <a href="#" id="a3" class="n2" onmouseover="Tab('a','ax',6,3)"><span>DELPHI</span></a>
 <a href="#" id="a4" class="n2" onmouseover="Tab('a','ax',6,4)"><span>MOOTOOLS</span></a>
 <a href="#" id="a5" class="n2" onmouseover="Tab('a','ax',6,5)"><span>WECLCOME TO</span></a>
 <div></div> 
 </div>
 <div class="tabcon">
 <ul id="ax1">
 <li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
 <li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
 <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
 </ul>
 <ul id="ax2" style="display:none">
 <li><a href="#" target="_blank">Serv-U 6.3 雨林木风内部中文破解版</a></li>
 <li><a href="#" target="_blank">樱桃企业网站管理系统ASP v1.0</a></li>
 <li><a href="#" target="_blank">校无忧在线考试系统ASP版 v1.0</a></li>
 </ul>
 <ul id="ax3" style="display:none">
 <li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
 <li><a href="#" target="_blank">4个简洁实用的CSS横向菜单,带搜索框</a></li>
 <li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
 </ul>
 <ul id="ax4" style="display:none">
 <li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
 <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
 <li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
 </ul>
 <ul id="ax5" style="display:none">
 <li><a href="#" target="_blank">Serv-U 6.3 雨林木风内部中文破解版</a></li>
 <li><a href="#" target="_blank">樱桃企业网站管理系统ASP v1.0</a></li>
 <li><a href="#" target="_blank">校无忧在线考试系统ASP版 v1.0</a></li>
 </ul>
 </div>
</div>
<p>onclick事件</p>
<div class="Tab">
 <div class="title">
 <a href="#" id="b1" class="n1" onclick="Tab('b','bx',6,1)"><span>JAVA</span></a>
 <a href="#" id="b2" class="n2" onclick="Tab('b','bx',6,2)"><span>VB</span></a>
 <a href="#" id="b3" class="n2" onclick="Tab('b','bx',6,3)"><span>VC++</span></a>
 <a href="#" id="b4" class="n2" onclick="Tab('b','bx',6,4)"><span>JQUERY</span></a>
 <a href="#" id="b5" class="n2" onclick="Tab('b','bx',6,5)"><span>NEXT WHICH ONE……</span></a>
 <div></div> 
 </div>
 <div class="tabcon">
 <ul id="bx1">
 <li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
 <li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
 <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
 </ul>
 <ul id="bx2" style="display:none">
 <li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
 <li><a href="#" target="_blank">4个简洁实用的CSS横向菜单,带搜索框</a></li>
 <li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
 </ul>
 <ul id="bx3" style="display:none">
 <li><a href="#" target="_blank">Serv-U 6.3 雨林木风内部中文破解版</a></li>
 <li><a href="#" target="_blank">樱桃企业网站管理系统ASP v1.0</a></li>
 <li><a href="#" target="_blank">校无忧在线考试系统ASP版 v1.0</a></li>
 </ul>
 <ul id="bx4" style="display:none">
 <li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
 <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
 <li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
 </ul>
 <ul id="bx5" style="display:none">
 <li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
 <li><a href="#" target="_blank">4个简洁实用的CSS横向菜单,带搜索框</a></li>
 <li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
 </ul>
 </div>
</div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
JavaScript中的继承之类继承
May 01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
JS返回顶部实例代码
Aug 09 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
JS实现完全语义化的网页选项卡效果代码
Sep 15 #Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 #Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 #Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 #Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 #Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 #Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 #Javascript
You might like
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python实现ipsec开权限实例
2014/11/11 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python 异常处理的实例详解
2017/09/11 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
公司办公室岗位职责
2014/03/19 职场文书
合作意向书模板
2014/03/31 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL