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

  • 相关阅读:
    SQL 学习笔记(一)联表查询
    .NET (OleDb) Access 各个版本的连接字符口串
    加油站
    程序员的编程套路
    落单的数
    读《怎样解题》
    使用org-mode写cnblogs博客
    Emacs 25.1 error solved: url-http-create-request: Multibyte text in HTTP request
    二进制表示小数
    快速幂
  • 原文地址:https://www.cnblogs.com/itecho/p/1307151.html
Copyright © 2011-2022 走看看