首页
所有分类
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 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
SVN(1) ESXI(1) 表约束(2) caddy(1) Master(1) 共享文件夹(1) Slave(1) 主从复制(1) 骨架屏(1) NginxConfig(1)
You might like
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP递归算法的简单实例
2019/02/28 PHP
PHP 8新特性简介
2020/08/18 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
Node.js自定义实现文件路由功能
2017/09/22 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python中装饰器的一个妙用
2015/02/08 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python银行系统实战源码
2019/10/25 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python networkx包的实现
2020/02/14 Python
python对XML文件的操作实现代码
2020/03/27 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
亲属关系公证书
2014/04/08 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers