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

赞 (0)

相关推荐

  • 简单通用的JS滑动门代码

    复制代码 代码如下: <UL id=tabMainNav> <LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> <LI id=tab_ShareEmailNav onmousem

  • JS+CSS实现简易的滑动门效果代码

    JS+CSS实现简易的滑动门效果代码

    本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • 一个js实现的所谓的滑动门

    滑动门:我不理解为什么这样叫. 我就命名为:JMenuTab吧,因为写它是为了当我的菜单. IE6,FireFox下测试通过. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

  • JS+CSS实现简单滑动门(滑动菜单)效果

    JS+CSS实现简单滑动门(滑动菜单)效果

    本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮.更实用的滑动门做铺垫. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如下: <!DOC

  • javascript 通用滑动门tab类

    滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容

  • JS仿淘宝实现的简单滑动门效果代码

    JS仿淘宝实现的简单滑动门效果代码

    本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL

  • 基于JavaScript实现滑动门效果

    基于JavaScript实现滑动门效果

    本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下 滑动门效果: 原理: 一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示. 假设图片的宽度是120px,其他三道门露出的宽度是80px. 初始状态下, 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px. 当第二道门打开时, 第二道门左边的距离是80px,为(120-40)px 第三道和第四道门左边的距离不变. 当第三道门打开时, 第二道门左边的距离是80px,

  • js通用滑动门类

    滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容

  • JS+CSS实现带小三角指引的滑动门效果

    JS+CSS实现带小三角指引的滑动门效果

    本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代

  • JS+CSS实现自动切换的网页滑动门菜单效果代码

    JS+CSS实现自动切换的网页滑动门菜单效果代码

    本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

随机推荐