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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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(视频)Http下载
2006/12/12 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
jQuery find和children方法使用
2011/01/31 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
详解JS模块导入导出
2017/12/20 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python 实现简单的电话本功能
2015/08/09 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python命令行参数用法实例分析
2019/06/25 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
django 读取图片到页面实例
2020/03/27 Python
用python实现名片管理系统
2020/06/18 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
社区文化建设方案
2014/05/02 职场文书
禁止酒驾标语
2014/06/25 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
老人节标语大全
2014/10/08 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android