首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
vue实现动态数据绑定
Apr 28 Javascript
jquery获取链接地址和跳转详解（推荐）
Aug 15 jQuery
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
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
text-shadow(1) Scheduled(1) 模拟登录(1) Date(1) TypeScript(2) 扫雷(1) NumPy(2) 双向链表(6) 区块链(2) 单向链表(1)
You might like
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
js实现无缝轮播图
2020/03/09 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python机器学习实战之K均值聚类
2017/12/20 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
三下乡活动方案
2014/01/31 职场文书
雷人标语集锦
2014/06/19 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
导游词格式
2015/02/13 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
离职证明格式样本
2015/06/12 职场文书
检举信的写法
2019/04/10 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书