首页
所有分类
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 相关文章推荐
让angularjs支持浏览器自动填表
Nov 10 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
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
限流器(1) 死锁(3) 异步机制(1) sql模式(1) 远程连接(2) springCloud(6) 逻辑备份(1) 全表扫描(1) 轮询锁(1) into outfile(1)
You might like
php读取csc文件并输出
2015/05/21 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
js类 from qq
2006/11/13 Javascript
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Bootstrap源码解读导航条（7）
2016/12/23 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
jquery处理checkbox（复选框）是否被选中实例代码
2017/06/12 jQuery
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[01:14]2019完美世界城市挑战赛（秋季赛）全国总决赛精彩花絮
2020/01/08 DOTA
python求pi的方法
2014/10/08 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
理肤泉俄罗斯官网：La Roche-Posay俄罗斯
2018/07/24 全球购物
荷兰浴室和卫浴网上商店：Badkamerxxl.nl
2020/10/06 全球购物
Made in Design意大利：现代家具、名家灯具和装饰
2020/10/27 全球购物
建筑学推荐信
2013/11/03 职场文书
学习心得体会
2014/01/01 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
百善孝为先：关于孝道的经典语录
2019/10/18 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA