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资料toString 方法
Mar 13 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
微信小程序实现倒计时功能
Nov 19 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
js DOM的学习笔记
2011/12/22 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python代码的打包与发布详解
2014/07/30 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
用Python制作音乐海报
2021/01/26 Python
python链表类中获取元素实例方法
2021/02/23 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
python爬取youtube视频的示例代码
2021/03/03 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
启动仪式策划方案
2014/06/14 职场文书
青年志愿者活动感想
2015/08/07 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android