JS实现可拖拽的菜单
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>
<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代码
- function all(){
- event.returnValue = false;
- }
- document.oncontextmenu = all
- document.onselectstart = all
- function mopopo(){
- event.cancelBubble = true;
- }
- var zz = 0
- function find(obj){
- zz = obj
- x = document.body.scrollLeft + event.clientX - zz.style.pixelLeft
- zz.setCapture();
- }
- //控制拖动的层
- function moves(){
- if(zz == 0)return false;
- else{
- if(document.body.scrollLeft + event.clientX - x > 365){
- zz.style.pixelLeft = 365
- }
- else if(document.body.scrollLeft + event.clientX - x < 11){
- zz.style.pixelLeft = 11
- }
- else{
- zz.style.pixelLeft = document.body.scrollLeft + event.clientX - x
- }
- }
- }
- //控制被拖动的层
- function nomoves(){
- var ason = new Array()
- ason[0] = 'n01'
- ason[1] = 'n02'
- ason[2] = 'n03'
- ason[3] = 'n04'
- ason[4] = 'n05'
- ason[5] = 'b01'
- ason[6] = 'b02'
- ason[7] = 'b03'
- ason[8] = 'b04'
- ason[9] = 'b05'
- for(z = 0;z < ason.length;z++){
- eval(ason[z]).style.pixelLeft = 11
- }
- }
- //块区的转换控制
- function allm(obj){
- if(obj.style.pixelLeft < 0){
- gall.style.pixelLeft = -540
- ball.style.pixelLeft = -540
- obj.style.pixelLeft = 0
- }
- }
- //背景控制
- function tover(obj){
分享到：
评论