脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS简洁纵向滑动菜单(滑动门)效果

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

 更新时间：2015年10月19日 10:41:04   作者：企鹅  
这篇文章主要介绍了JS实现的简洁纵向滑动菜单(滑动门)效果,通过简单的页面元素遍历实现华东切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-zxhd-menu-demo/

具体代码如下：

<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&nbsp;</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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS实战面向对象贪吃蛇小游戏示例

    JS实战面向对象贪吃蛇小游戏示例

    大家好，本篇文章主要讲的是JS实战面向对象贪吃蛇小游戏示例，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下哦，方便下次浏览
    2021-12-12
  • js中let能否完全替代IIFE

    js中let能否完全替代IIFE

    这篇文章主要介绍了js中let能否完全替代IIFE，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
    2019-06-06
  • JS生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • 浅谈小程序globalData的那些事儿

    浅谈小程序globalData的那些事儿

    这篇文章主要介绍了浅谈小程序globalData的那些事儿，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Java File类的常用方法总结

    Java File类的常用方法总结

    这篇文章主要介绍了Java File类的常用方法总结,本文讲解了File类的常用方法,并对一些方法给出了代码示例,需要的朋友可以参考下
    2015-03-03
  • Bootstrap轮播图学习使用

    Bootstrap轮播图学习使用

    这篇文章主要为大家详细介绍了Bootstrap轮播图学习使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 复制本贴标题和地址的js代码

    复制本贴标题和地址的js代码

    复制本贴标题和地址，发给QQ|Msn上的好友的代码，方便利用用户宣传的js
    2008-07-07
  • Javascript生成全局唯一标识符（GUID,UUID）的方法

    Javascript生成全局唯一标识符（GUID,UUID）的方法

    本文给大家汇总介绍了5种使用javascript实现全局唯一标识符（GUID,UUID）的方法，非常的全面，有需要的小伙伴可以来参考下
    2016-02-02
  • js Canvas绘制圆形时钟教程

    js Canvas绘制圆形时钟教程

    这篇文章主要为大家详细介绍了js Canvas绘制圆形时钟教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js实现自动锁屏功能

    js实现自动锁屏功能

    有这么一个需求，开发了一套系统，当用户离开桌面或者一段时间不操作的话，需要把该系统所有打开页面锁定起来，本文就详细的介绍一下，感兴趣的可以了解一下
    2021-06-06

最新评论