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

JS+CSS实现自动切换的网页滑动门菜单效果代码

Posted in Javascript onSeptember 14, 2015

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码。分享给大家供大家参考。具体如下：

这是一款支持自动切换功能的网页滑动门菜单，JS与CSS结合的技术成果，有人说它是自己会切换的网页选项卡标签面板，QQ登录后弹出的每日要闻迷你窗口中有类似效果，但是代码写法却是截然不同的，每一位作者的思路是不同的，因此您多了一份参考。

运行效果截图如下：

JS+CSS实现自动切换的网页滑动门菜单效果代码

在线演示地址如下：

具体代码如下：

<html>
<head>
<title>自动切换的网页滑动门菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img {margin:0; padding:0; border:0;}
td,p,div,li,select,input,textarea {font-size:12px;}
ul {list-style-type:none; text-align:left;}
select,input {vertical-align:middle;}
body { color:#333; repeat-x;}
#wrap { width:750px; margin:0 auto; clear:both; background:#fff;}
.clearit { clear:both;}
a{ color:#039; text-decoration:underline;}
a:hover{ color:#F00; text-decoration:underline;}
.linkN a{ color:#039; text-decoration:none;}
.linkN a:hover{ color:#F00; text-decoration:underline;}
.linkfff a{ color:#fff; text-decoration:none;}
.linkfff a:hover{ color:#F00; text-decoration:underline;}
.linkAD5A00 a { color:#AD5A00; text-decoration:none;}
.linkAD5A00 a:hover { color:#f00; text-decoration:underline;}
.linkC00 a { color:#C00; text-decoration:none;}
.linkC00 a:hover { color:#C00; text-decoration:underline;}
.link666 a { color:#666; text-decoration:none;}
.link666 a:hover { color:#F00; text-decoration:underline;}
h1 { font-size:16px; font-family:simhei; font-weight:500; text-align:center; padding:5px 0 3px 0;}
h2 { font-size:14px; color:#fff; display:block; clear:both; text-align:left;}
h3 { font-size:14px; font-weight:200; no-repeat 2px 7px; border-bottom:2px solid #BBE5F1; padding:5px 0 2px 17px; margin:5px 0;}
span{ font-size:12px; font-weight:200; float:right; margin-right:5px;}
ul { margin:5px 0 0 5px; color:#039;}
li { padding:3px 0 3px 10px; no-repeat 3px 7px;}
.noStyle li { padding:3px 0; background:none;}
ul.two { margin:8px 0 0 12px;}
.two li { padding:3px 0 3px 10px; no-repeat 3px 7px; float:left; width:110px;}
.f14 li { font-size:14px; padding:1px 0 4px 10px;}
.blkT { margin-top:6px;}
.list14 { font-size:14px; line-height:23px;}
/*CSS for 共用模块 end*/
.leW { width:254px;}
.miW { padding:0 5px;}
.riW { width:140px; background:#F3F3F3;}
.riW li { padding:3px 0 3px 6px; no-repeat 0 7px;}
.cont_le { background:#EBF8FB; border:1px solid #A3D8E0; border-top:none; border-bottom:none; padding:8px 0 8px 0;}
.cont_all { background:#EBF8FB; border:1px solid #A3D8E0; border-top:none; padding:8px 0 8px 0;}
.text { padding:4px 0 8px 0; text-align:center;}
.pic { margin:8px 0; text-align:center;}
.textL { text-align:left; padding:3 0 8px 0;}
.blankT { margin-top:8px;}
.picfff { text-align:center;}
.picfff img { border:1px solid #fff; margin:5px 0;}
.partA .jdt { background:#D11C00; padding:5px 0 5px 0; text-align:left;}
.partA .cont_le p { float:left; margin:0 0 0 6px; text-align:center;}
.partA .miW .top { height:17px; no-repeat; text-align:right; padding:5px 18px 0 0; margin-top:8px;}
.partA .miW .top a { color:#C00; text-decoration:underline;}
.partA .miW .top a:hover { color:#C00; text-decoration:none;}
.partA .miW .cont { background:#FFFBEA; border:1px solid #FC6; border-top:none; padding-bottom:5px; border-bottom:none;}
.partA .miW .cont p{ line-height:19px; margin-left:15px;}
.partA .miW .cont .line { repeat-x; height:1px; font-size:0; margin:5px 15px;}
.partA .miW .top1 { height:15px; no-repeat; text-align:left; padding:4px 0 0 23px; margin-left:0; _margin-left:2px;}
.partA .miW .top1 h2 { color:#000;}
.partA .miW .cont1 { border:1px solid #FC6; border-top:none; padding:5px 0 8px 0;}
.partA .shiP { no-repeat bottom; width:120px; height:109px; border:1px solid #A0B2D8; margin:10px 0 0 9px;}
/*标签*/
.menu1Off,.menu1On,.menu2Off,.menu2On,.menu3Off,.menu3On,.menu4Off,.menu4On { height:20px; color:#039; text-align:center; background:#B2DBE1; cursor:pointer; padding-top:3px;}
.menu1On,.menu2On,.menu3On,.menu4On{ color:#C00; background:#fff; border-left:1px solid #34AEBE; border-right:1px solid #34AEBE;}
/*标签a*/
.menua1Off,.menua1On,.menua2Off,.menua2On{ height:16px; width:52px; color:#666; text-align:center; repeat-x; cursor:pointer; padding-top:3px;}
.menua1On,.menua2On{ color:#C00; font-weight:bold; repeat-x; }
.menuCont { background:#F3F3F3;}
.menuCont th { text-align:center; font-weight:200; padding:5px 0 3px 0;}
.menuCont .noBg td { background:#fff; padding:5px 0 3px 5px; border-right:1px solid #F3F3F3; }
.menuCont .noBg1 td { background:#F3F3F3; padding:5px 0 3px 5px; border-right:1px solid #FFF;}
.partA .tuKu { no-repeat; margin-left:5px; height:150px; text-align:center;}
.partA .tuKu p { float:left; margin:0 10px; _margin:0 8px;}
.partA .tuKu img { padding:5px; border:1px solid #D0D1D2; background:#fff; margin:8px 0;}
.partA .shiPyy { border:1px solid #FC6; margin-top:5px;}
.partA .shiPyy h2 { color:#C00; background:#FFEAAF; padding:5px 0 3px 5px;}
.partA .shiPyy img { vertical-align:middle;}
.adv { margin:8px 0;}
.leftW { width:605px; padding-right:5px; text-align:center;}
.leftW .leW { width:140px;}
.leftW .leW img { margin-bottom:8px;}
.leftW .leW p { text-align:left; line-height:19px; padding:0 5px; margin-top:5px;}
.leftW .leW .picText { text-align:left; line-height:19px; padding-right:5px; margin-bottom:8px;}
.leftW .leW .picText img { float:left; margin:0 7px;}
.midW { padding:5px 0 0 5px; text-align:left;}
.midW table { margin-bottom:8px;}
.midW td { line-height:19px; padding:3px 0px;}
.midW span { float:none; color:#929292;}
.midW .more span { float:right;}
.midW .cC00 { color:#C00; font-weight:bold;}
.rightW { width:140px; background:#F3F3F3;}
.rightW p { float:left; margin:5px 0 5px 8px; _margin:5px 0 5px 5px;}
.rightW .cont { text-align:left; line-height:19px; text-align:left; padding:8px 0 0 8px;}
.rightW .date { margin-top:8px;}
.rightW .date td { color:#666; padding:1px 0;}
.rightW .date td { background:#fff; padding:1px 0; color:#039;}
.rightW .date .cF60 { color:#F60; font-weight:bold;}
.rightW .fenX { margin-top:8px; margin-left:3px;}
.rightW .fenX td { padding:5px 0 2px 5px; background:#fff; text-align:left;}
.rightW .blk000 img { border:1px solid #000;}
-->
</style>
</head>
<!--把<body>改为-->
<body onLoad="change_Menu(1)">
<table width="254" cellspacing="0" class="partA">
 <tr>
 <td class="leW" valign="top" width="254">
 <!-- d --> <!-- d -->
 <!-- 舌签排行 begin -->
<script language="JavaScript" type="text/javascript">
//<![CDATA[
var cur_index=1
var num=4 //该值记录标签的个数
var settime
function GetObj(objName){
 if(document.getElementById){
 return eval('document.getElementById("' + objName + '")');
 }else if(document.layers){
 return eval("document.layers['" + objName +"']");
 }else{
 return eval('document.all.' + objName);
 }
}
function change_Menu(index){
 for(var i=1;i<=num;i++){/* 最多支持8个标签 */
 if(GetObj("con"+i)&&GetObj("m"+i)){
 GetObj("con"+i).style.display = 'none';
 GetObj("m"+i).className = "menu"+i+"Off";
 }
 }
 if(GetObj("con"+index)&&GetObj("m"+index)){
 GetObj("con"+index).style.display = 'block';
 GetObj("m"+index).className = "menu"+index+"On";
 }
 cur_index=index
 if(cur_index<num){
 cur_index++
 }
 else{
  cur_index=1
 }
 settime=setTimeout("change_Menu(cur_index)",2000)//设置延迟时间
}
function Menu(c_index){
 clearTimeout(settime)
 change_Menu(c_index)
 } 
//]]>
</script>
<table cellspacing="0" style="background:#3FA6B5; width:100%;" class="clearit">
 <tr>
 <td height="3"></td>
 </tr>
 <tr>
 <td align="center">自动切换</td>
 <td id="m1" onClick="Menu(1)" class="menu1On" title="栏目">栏目1</td>
 <td width="1"></td>
 <td id="m2" onClick="Menu(2)" class="menu2Off" title="栏目">栏目2</td>
 <td width="1"></td>
 <td id="m3" onClick="Menu(3)" class="menu3Off" title="栏目">栏目3</td>
 <td width="1"></td>
 <td id="m4" onClick="Menu(4)" class="menu4Off" title="栏目">栏目4</td>
 <td width="10"></td>
 </tr>
</table>
<div id="con1" class="cont_le picfff">
<p style="margin-left:1px;"><br><a href="#">111</a></p>
<div class="clearit"></div>
</div>
<div id="con2" style="display:none;" class="cont_le picfff">
<p style="margin-left:1px;"><br><a href="#">222</a></p>
<div class="clearit"></div>
</div>
<div id="con3" style="display:none;" class="cont_le picfff">
<p style="margin-left:1px;"><br><a href="#">333</a></p>
<div class="clearit"></div>
</div>
<div id="con4" style="display:none;" class="cont_le picfff">
<p style="margin-left:1px;"><br><a href="#">444</a></p>
<div class="clearit"></div>
</div>
</body>
</html>

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

JS+CSS实现自动切换的网页滑动门菜单效果代码

- Author -

企鹅

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

Javascript 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作（createElement）
Sep 14 #Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
Windows Server(4) swing(1) Git(3) K8s(1) Windows Server 2022(3) webpack(1) NTP(1) calc(1) SandBox(1) OpenFeign(1)
You might like
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
利用JS对iframe父子（内外）页面进行操作的方法教程
2017/06/15 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
常见python正则用法的简单实例
2016/06/21 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python中文件的读取和写入操作
2018/04/27 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python3 中的字符串（单引号、双引号、三引号）以及字符串与数字的运算
2019/07/18 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
匡威德国官网：Converse德国
2019/01/26 全球购物
什么是TCP/IP
2014/07/27 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
应届毕业生自荐信
2014/05/28 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS