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 相关文章推荐
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
原生JS实现留言板功能
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教程 基本语法
2009/10/23 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
angularJS开发注意事项
2018/05/26 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Python实现截屏的函数
2015/07/26 Python
详解Python如何生成词云的方法
2018/06/01 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
市场营销求职信范文
2014/02/21 职场文书
单位承诺书格式
2014/05/21 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书