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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 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
mysql5详细安装教程
2007/01/15 PHP
PHP 代码规范小结
2012/03/08 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php类的定义与继承用法实例
2015/07/07 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
幼师自我鉴定
2014/02/01 职场文书
献爱心倡议书
2014/04/14 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
护林员个人总结
2015/03/04 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
MySQL 逻辑备份 into outfile
2022/05/15 MySQL