`
cpine
  • 浏览: 53182 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JS实现可拖拽的菜单

JavaScriptCSS
阅读更多
Html代码 复制代码
  1. <html>  
  2.   <head>  
  3.     <link href="/stylesheets/menu.css" rel="stylesheet" type="text/css" />  
  4.     <script type='text/javascript' language='javascript' src="/javascripts/menu.js"></script>  
  5.   </head>  
  6.   <body>  
  7.     <div class="nmodiv"></div>  
  8.     <span id="gall" style="position:absolute;left:0px;z-index:2">  
  9.       <div class="modiv" id="n01"  
  10.            onMouseOver="tover(this)"  
  11.            onMouseOut="tout(this)"  
  12.            onMouseMove="moves()"  
  13.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  14.            onMouseDown="find(this);nomoves()">  
  15.         <span class="heads1">蔡依林 [ 07 首 ]</span>  
  16.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  17.           01. Because of you   
  18.           02. Don't Stop   
  19.           03. Lucky Number   
  20.           04. 爱上了一条街   
  21.           05. 感觉你的存在   
  22.           06. 如过不想要   
  23.           07. 我知道你很难过   
  24.         </div>  
  25.       </div>  
  26.       <div class="modiv" id="n02"  
  27.            onMouseOver="tover(this)"  
  28.            onMouseOut="tout(this)"  
  29.            onMouseMove="moves()"  
  30.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  31.            onMouseDown="find(this);nomoves()">  
  32.         <span class="heads1">那　英 [ 08 首 ]</span>  
  33.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  34.           01. 不管有多苦   
  35.           02. 出卖   
  36.           03. 梦醒了   
  37.           04. 梦一场   
  38.           05. 我不是天使   
  39.           06. 心酸的浪漫   
  40.           07. 一笑而过   
  41.           08. 愿赌服输   
  42.         </div>  
  43.       </div>  
  44.       <div class="modiv" id="n03"  
  45.            onMouseOver="tover(this)"  
  46.            onMouseOut="tout(this)"  
  47.            onMouseMove="moves()"  
  48.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  49.            onMouseDown="find(this);nomoves()">  
  50.         <span class="heads1">刘若英 [ 09 首 ]</span>  
  51.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  52.           01. 成全   
  53.           02. 到处乱走   
  54.           03. 对面男生的房间   
  55.           04. 很爱很爱你   
  56.           05. 后来   
  57.           06. 决定   
  58.           07. 年华   
  59.           08. 收获   
  60.           09. 为爱痴狂   
  61.         </div>  
  62.       </div>  
  63.       <div class="modiv" id="n04"  
  64.            onMouseOver="tover(this)"  
  65.            onMouseOut="tout(this)"  
  66.            onMouseMove="moves()"  
  67.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  68.            onMouseDown="find(this);nomoves()">  
  69.         <span class="heads1">梁静茹 [ 04 首 ]</span>  
  70.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  71.           01. 爱你不是两三天   
  72.           02. 如果有一天   
  73.           03. 闪亮的星   
  74.           04. 勇气   
  75.         </div>  
  76.       </div>  
  77.       <div class="modiv" id="n05"  
  78.            onMouseOver="tover(this)"  
  79.            onMouseOut="tout(this)"  
  80.            onMouseMove="moves()"  
  81.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  82.            onMouseDown="find(this);nomoves()">  
  83.         <span class="heads1">Ru　Ru [ 05 首 ]</span>  
  84.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  85.           01. 爱上了   
  86.           02. 美丽心情   
  87.           03. 一点点力量   
  88.           04. 有时候没时候   
  89.           05. 真好！我要的爱情   
  90.         </div>  
  91.       </div>  
  92.     </span>  
  93.     <span id="ball" style="position:absolute;left:-540px;z-index:2">  
  94.       <div class="modiv" id="b01"  
  95.            onMouseOver="tover(this)"  
  96.            onMouseOut="tout(this)"  
  97.            onMouseMove="moves()"  
  98.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  99.            onMouseDown="find(this);nomoves()">  
  100.         <span class="heads1">张信哲 [ 19 首 ]</span>  
  101.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  102.           01. GoodBey Yesterday   
  103.           02. 爱不留   
  104.           03. 爱就一个字   
  105.           04. 爱情的余味   
  106.           05. 爱如潮水   
  107.           06. 别怕我伤心   
  108.           07. 不要对他说   
  109.           08. 不做你的爱人   
  110.           09. 等风的旗   
  111.           10. 过火   
  112.           11. 宽容   
  113.           12. 难以抗拒你容颜   
  114.           13. 太想爱你   
  115.           14. 我是真的爱你   
  116.           15. 信仰   
  117.           16. 用情   
  118.           17. 有一点动心   
  119.           18. 找钥匙   
  120.           19. 直觉<p><p>  
  121.         </div>  
  122.       </div>  
  123.       <div class="modiv" id="b02"  
  124.            onMouseOver="tover(this)"  
  125.            onMouseOut="tout(this)"  
  126.            onMouseMove="moves()"  
  127.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  128.            onMouseDown="find(this);nomoves()">  
  129.         <span class="heads1">刘德华 [ 11 首 ]</span>  
  130.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  131.           01. 爱情新活力   
  132.           02. 苯小孩   
  133.           03. 冰雨   
  134.           04. 男朋友   
  135.           05. 男人哭吧哭吧不是罪   
  136.           06. 说话的哑巴   
  137.           07. 天意   
  138.           08. 忘情谁   
  139.           09. 相思成灾   
  140.           10. 心蓝   
  141.           11. 真永远<p><p>  
  142.         </div>  
  143.       </div>  
  144.       <div class="modiv" id="b03"  
  145.            onMouseOver="tover(this)"  
  146.            onMouseOut="tout(this)"  
  147.            onMouseMove="moves()"  
  148.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  149.            onMouseDown="find(this);nomoves()">  
  150.         <span class="heads1">张学友 [ 08 首 ]</span>  
  151.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  152.           01. 当我想起你   
  153.           02. 等你回来   
  154.           03. 你好毒   
  155.           04. 如果这都不算爱   
  156.           05. 天气那么热   
  157.           06. 忘记你我做不到   
  158.           07. 心如刀割   
  159.           08. 一千个伤心的理由<p><p>  
  160.         </div>  
  161.       </div>  
  162.       <div class="modiv" id="b04"  
  163.            onMouseOver="tover(this)"  
  164.            onMouseOut="tout(this)"  
  165.            onMouseMove="moves()"  
  166.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  167.            onMouseDown="find(this);nomoves()">  
  168.         <span class="heads1">黎　明 [ 04 首 ]</span>  
  169.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  170.           01. Happy2000   
  171.           02. 爱天爱地   
  172.           03. 全日爱   
  173.           04. 重爱轻友<p><p>  
  174.         </div>  
  175.       </div>  
  176.       <div class="modiv" id="b05"  
  177.            onMouseOver="tover(this)"  
  178.            onMouseOut="tout(this)"  
  179.            onMouseMove="moves()"  
  180.            onMouseUp="this.releaseCapture();zz=0;tout(this)"  
  181.            onMouseDown="find(this);nomoves()">  
  182.         <span class="heads1">游鸿明 [ 04 首 ]</span>  
  183.         <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">  
  184.           01. 爱我的人很我爱的人   
  185.           02. 地下铁   
  186.           03. 五月的雪   
  187.           04. 下沙   
  188.           05. 一天一万年<p><p>  
  189.         </div>  
  190.       </div>  
  191.     </span>  
  192.     <div id="hhh1" style="position:absolute;left:400;top:100" onclick="allm(ball)">男歌手</div>  
  193.     <p id="hhh2" style="position:absolute;left:400;top:130" onclick="allm(gall)">女歌手</p>  
  194.   </body>  
  195. </html>   
<html>
  <head>
    <link href="/stylesheets/menu.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' language='javascript' src="/javascripts/menu.js"></script>
  </head>
  <body>
    <div class="nmodiv"></div>
    <span id="gall" style="position:absolute;left:0px;z-index:2">
      <div class="modiv" id="n01"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">蔡依林 [ 07 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. Because of you
          02. Don't Stop
          03. Lucky Number
          04. 爱上了一条街
          05. 感觉你的存在
          06. 如过不想要
          07. 我知道你很难过
        </div>
      </div>
      <div class="modiv" id="n02"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">那　英 [ 08 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 不管有多苦
          02. 出卖
          03. 梦醒了
          04. 梦一场
          05. 我不是天使
          06. 心酸的浪漫
          07. 一笑而过
          08. 愿赌服输
        </div>
      </div>
      <div class="modiv" id="n03"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">刘若英 [ 09 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 成全
          02. 到处乱走
          03. 对面男生的房间
          04. 很爱很爱你
          05. 后来
          06. 决定
          07. 年华
          08. 收获
          09. 为爱痴狂
        </div>
      </div>
      <div class="modiv" id="n04"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">梁静茹 [ 04 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 爱你不是两三天
          02. 如果有一天
          03. 闪亮的星
          04. 勇气
        </div>
      </div>
      <div class="modiv" id="n05"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">Ru　Ru [ 05 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 爱上了
          02. 美丽心情
          03. 一点点力量
          04. 有时候没时候
          05. 真好！我要的爱情
        </div>
      </div>
    </span>
    <span id="ball" style="position:absolute;left:-540px;z-index:2">
      <div class="modiv" id="b01"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">张信哲 [ 19 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. GoodBey Yesterday
          02. 爱不留
          03. 爱就一个字
          04. 爱情的余味
          05. 爱如潮水
          06. 别怕我伤心
          07. 不要对他说
          08. 不做你的爱人
          09. 等风的旗
          10. 过火
          11. 宽容
          12. 难以抗拒你容颜
          13. 太想爱你
          14. 我是真的爱你
          15. 信仰
          16. 用情
          17. 有一点动心
          18. 找钥匙
          19. 直觉<p><p>
        </div>
      </div>
      <div class="modiv" id="b02"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">刘德华 [ 11 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 爱情新活力
          02. 苯小孩
          03. 冰雨
          04. 男朋友
          05. 男人哭吧哭吧不是罪
          06. 说话的哑巴
          07. 天意
          08. 忘情谁
          09. 相思成灾
          10. 心蓝
          11. 真永远<p><p>
        </div>
      </div>
      <div class="modiv" id="b03"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">张学友 [ 08 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 当我想起你
          02. 等你回来
          03. 你好毒
          04. 如果这都不算爱
          05. 天气那么热
          06. 忘记你我做不到
          07. 心如刀割
          08. 一千个伤心的理由<p><p>
        </div>
      </div>
      <div class="modiv" id="b04"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">黎　明 [ 04 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. Happy2000
          02. 爱天爱地
          03. 全日爱
          04. 重爱轻友<p><p>
        </div>
      </div>
      <div class="modiv" id="b05"
           onMouseOver="tover(this)"
           onMouseOut="tout(this)"
           onMouseMove="moves()"
           onMouseUp="this.releaseCapture();zz=0;tout(this)"
           onMouseDown="find(this);nomoves()">
        <span class="heads1">游鸿明 [ 04 首 ]</span>
        <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
          01. 爱我的人很我爱的人
          02. 地下铁
          03. 五月的雪
          04. 下沙
          05. 一天一万年<p><p>
        </div>
      </div>
    </span>
    <div id="hhh1" style="position:absolute;left:400;top:100" onclick="allm(ball)">男歌手</div>
    <p id="hhh2" style="position:absolute;left:400;top:130" onclick="allm(gall)">女歌手</p>
  </body>
</html>
Js代码 复制代码
  1. function all(){   
  2.     event.returnValue = false;   
  3. }   
  4.   
  5. document.oncontextmenu = all   
  6. document.onselectstart = all   
  7.   
  8. function mopopo(){   
  9.     event.cancelBubble = true;   
  10. }   
  11.   
  12. var zz = 0   
  13. function find(obj){   
  14.     zz = obj   
  15.     x = document.body.scrollLeft + event.clientX - zz.style.pixelLeft   
  16.     zz.setCapture();   
  17. }   
  18.   
  19. //控制拖动的层   
  20. function moves(){   
  21.     if(zz == 0)return false;   
  22.     else{   
  23.         if(document.body.scrollLeft + event.clientX - x > 365){   
  24.             zz.style.pixelLeft = 365   
  25.         }   
  26.         else if(document.body.scrollLeft + event.clientX - x < 11){   
  27.             zz.style.pixelLeft = 11   
  28.         }   
  29.         else{   
  30.             zz.style.pixelLeft = document.body.scrollLeft + event.clientX - x   
  31.         }   
  32.     }   
  33. }   
  34.   
  35. //控制被拖动的层   
  36. function nomoves(){   
  37.     var ason = new Array()   
  38.     ason[0] = 'n01'  
  39.     ason[1] = 'n02'  
  40.     ason[2] = 'n03'  
  41.     ason[3] = 'n04'  
  42.     ason[4] = 'n05'  
  43.     ason[5] = 'b01'  
  44.     ason[6] = 'b02'  
  45.     ason[7] = 'b03'  
  46.     ason[8] = 'b04'  
  47.     ason[9] = 'b05'  
  48.     for(z = 0;z < ason.length;z++){   
  49.         eval(ason[z]).style.pixelLeft = 11   
  50.     }   
  51. }   
  52.   
  53. //块区的转换控制   
  54. function allm(obj){   
  55.     if(obj.style.pixelLeft < 0){   
  56.         gall.style.pixelLeft = -540   
  57.         ball.style.pixelLeft = -540   
  58.         obj.style.pixelLeft = 0   
  59.     }   
  60. }   
  61.   
  62. //背景控制   
  63. function tover(obj){   
  64. 分享到：
    | 认识C#中的委托和事件
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics