JS实现的简洁纵向滑动菜单(滑动门)效果


Posted in Javascript onOctober 19, 2015

本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:

这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一个“门”的内容存入JS数组中,这样可以减少代码量,但也带来了一个扩展的问题,扩展性方面有待完善,仅供参考。

运行效果截图如下:

JS实现的简洁纵向滑动菜单(滑动门)效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>纵向滑动门</title>
<style>
td,a,body{font-size:9pt;}
/*--选中的情况下*/
.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA;color:#000000}
/*未选中时边框颜色*/
.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1">
<tr><td valign="top">
 <table cellpadding="0" cellspacing="0" border="0" width="84" id="leftButtonTAble">
 <!--改变下面td 的高来控制整个高度-->
<tr><td height="20" align="center" class="DivAround_focus" onMouseOver="ChangeFocus(this)">七星彩</td></tr>
<tr><td height="20" align="center" class="DivAround_blur" onMouseOver="ChangeFocus(this)">排列五</td></tr>
<tr><td height="20" align="center" class="DivAround_blur" onMouseOver="ChangeFocus(this)">篮球彩</td></tr>
<tr><td height="22" align="center" class="DivAround_blur" onMouseOver="ChangeFocus(this)">足球彩</td></tr>
</table>
</td>
<td>
<table width="303" border="0" cellpadding="0" cellspacing="0" class="DivAround_content">
 <tr>
  <td valign="top" id="DivAroundContent" height=80><p>dsadsa </p></td>
 </tr>
</table>
</td></tr>
</table>
<script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);</script>
</body></html>
<script language="javascript">
var AroundInfoArray=new Array();
AroundInfoArray[0]="七星彩";
AroundInfoArray[1]="排列五";
AroundInfoArray[2]="篮球彩";
AroundInfoArray[3]="足球彩";
function ChangeFocus(obj)
{
for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++)
{
if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)
{
document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";
document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];
}else{
document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";
}
}
}
</script>

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

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
vue中的scope使用详解
Oct 29 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 #Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 #Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 #Javascript
在JavaScript中如何解决用execCommand(
Oct 19 #Javascript
简单谈谈Javascript中类型的判断
Oct 19 #Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 #Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 #Javascript
You might like
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python字符类型的一些方法小结
2016/05/16 Python
破解安装Pycharm的方法
2018/10/19 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python如何使用字符打印照片
2020/01/03 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
django 模型中的计算字段实例
2020/05/19 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
火烧圆明园观后感
2015/06/03 职场文书