JS實現可拖拽的菜單

原創 iteye_18384 2018-08-31 06:53
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){   
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

C#序列化對象轉爲爲XML格式字符串

實習公司原來的左側菜單是通過js進行ajax請求一個xml文件得到一個xml對象，然後拼接html文件，現在需要從數據庫取數據生成xml，因爲保密關係，太詳細的不能放出來，簡單說下流程 1、C#後臺執行SQL，得到DataTable對象

请叫我算术嘉 2020-07-08 10:17:16

asp.net 傳值

在通過傳值打開另一個頁面時 判斷是否有值傳過來     在Page_Load()中寫入 if(!Page.IsPostBack) { if(Request.querystring[ "傳值 "]!=null)  // Request

该用户懒的设置 2020-07-08 07:54:47

在ASP.NET 2.0中建立站點導航層次

站點導航提供程序--ASP.NET 2.0中的站點導航提供程序暴露了應用程序中的頁面的導航信息，它允許你單獨地定義站點的結構，而不用考慮頁面的實際物理佈局。默認的站點導航提供程序是基於XML的，但是你也可以通過編寫自定義的提供程序，從任何

yazoli2002 2020-07-08 03:08:01

Request.ServerVariables[] 學習

Request.ServerVariables("Url")  返回服務器地址 Request.ServerVariables("Path_Info")  客戶端提供的路徑信息 Request.ServerVariables("Appl_

leonkin 2020-07-08 11:23:15

Request.Browser 學習

SP中的Browser Capbilities組件嫩構獲取更深層次的瀏覽器信息，ASP.NET中的Browser對象可以認爲是Browser Capabilities組件的升級版本，只是ASP.NET中的Browser對象是通過調用Req

leonkin 2020-07-08 11:23:15

微信第三方平臺開發-從開始到測試

一：說明 *當前文檔比較簡陋，如果有其他方法不明確可以留言。 項目框架：.net freamwork 4.6.1 開發工具：vs2019 本次開發使用了Senparc.Weixin組件，地址：https://github.com/Jeff

a123_z 2020-07-08 08:40:05

ASP FSO文件操作

FSO 不能操作二進制文件，要操作二進制文件，請使用：ADODB.Stream。 創建文件 dim fso, f set fso = server.CreateObject("Scripting.FileSystemObject

该用户懒的设置 2020-07-08 07:54:47

ASP.NET鏈接網站的兩種方法

(1) System.Diagnostics.Process.Start("http://www.baidu.com"); (2)using System.Diagnostics //ProcessStartInfo startI

z0203153008 2020-07-08 06:36:40

System.ArgumentException: 指定字符串與主題所要求的形式不符。 在 System.Net.Mail.Message.set_Subject(String value)

最近看系統日誌時，常常發現下面錯誤： System.ArgumentException: 指定字符串與主題所要求的形式不符。  在 System.Net.Mail.Message.set_Subject(String value) 後用

Jimcn2009 2020-07-08 05:52:13

Repeater datalist

前臺:<ul> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li><%#Eval("字段")%></li> </ItemTemplate

delphiorang 2020-07-08 05:31:17

在ADO.NET中用參數化查詢縮短開發時間

 一段時間以來，存儲過程一直是企業應用程序開發數據訪問的首選方法。存儲過程的安全性更高、封裝能力更強，並能執行復雜的邏輯，且不會打亂應用程序代碼。但是

li_yu_hai 2020-07-08 05:05:37

ASP.NET實現登錄驗證碼

製作驗證碼主要是利用了C#的GDI繪製，效果如下圖所示： html代碼： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te

HerryDong 2020-07-08 04:12:25

Bootstrap TreeView使用教程三：製作樹形下拉框

前兩篇博客介紹了Bootstrap TreeView的使用方法，這篇博客就來介紹一下如何利用Bootstrap TreeView製作一個樹形下拉框，先來看一下效果： 其實原理很簡單，先創建一個文本框，然後在文本框下方創建樹，讓其

HerryDong 2020-07-08 04:12:25

Bootstrap TreeView使用教程一：樹的構造和顯示

很多時候我們需要在網頁上顯示存在層級隸屬關係的數據，例如省、市、區這三者就存在隸屬關係，如果要對它們進行顯示就需要用到樹控件。百度了很久，發現同志們經常用的有zTree、jsTree等等，但考慮到工作中的前端庫是Bootstrap

HerryDong 2020-07-08 04:12:25

刪除GridView記錄時給確認消息

如果你想在刪除GridView中一行記錄的時候讓系統給出一個提示信息，使得用戶能在確認刪除前能選擇放棄此操作，我認爲最簡單的方法是給GridView增

lijigang1982 2020-07-08 03:02:56