zoukankan      html  css  js  c++  java
  • 漂亮的仿flash菜单,来自蓝色经典

    <style>
    /* 先把这个 xmenu 的样式放到css里 */
    .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
    </style>

    <script>
    /*
    http://lexrus.blueidea.com/

    这是把事件动作绑定到菜单上的函数
    */
    function attachXMenu(objid){
     var tds=objid.getElementsByTagName('td');
     for(var i=0;i<tds.length;i++){
      with(tds[i]){
       onmouseover=function(){
        with(this){
         filters[0].apply();
         style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
         style.border='1px solid #ffffff'; //边框
         style.color='black'; //文字颜色
         filters[0].play();
        }
       }
       onmouseout=function(){
        with(this){
         filters[0].apply();
         style.background='#336699'; //这是鼠标离开时的背景颜色
         style.border='1px solid #336699'; //边框
         style.color='#ffffff'; //文字颜色
         filters[0].play();
        }
       }
      }
     }
    }
    </script>

    <!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
    <table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
     <tr>
      <td><a href="http://www.lenvo.cn/%22%3Ewww.lenvo.cn%3C/a%3E%3C/td>
      <td>Name</td>
      <td>Is</td>
      <td>LeX</td>
      <td>Rus</td>
      <td>!!!</td>
     </tr>
    </table>

    <script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
    <br><br><br><br>
    <!--下面这个是竖排的-->
    <table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
     <tr><td>My</td></tr>
     <tr><td>Name</td></tr>
     <tr><td>Is</td></tr>
     <tr><td>LeX</td></tr>
     <tr><td>Rus</td></tr>
     <tr><td>!!!</td></tr>
    </table>
    <script>attachXMenu(xmenu1);</script

  • 相关阅读:
    JSJ—类与对象
    JSJ—案例谈面向对象
    实现简单神经网络
    SSM+Netty项目结合思路
    SSM-Netty实现软硬件通信,真实项目案例
    Netty实战十四之案例研究(一)
    Netty实战十三之使用UDP广播事件
    Netty实战十一之预置的ChannelHandler和编解码器
    Netty实战十二之WebSocket
    Netty实战十之编解码器框架
  • 原文地址:https://www.cnblogs.com/itecho/p/1307151.html
Copyright © 2011-2022 走看看