论坛首页 → Web前端技术论坛 →

JS实现可拖拽的菜单

浏览 7241 次
锁定老帖子 主题：JS实现可拖拽的菜单
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jsntghf
  • 等级: 三星会员
  • 性别:
  • 文章: 60
  • 积分: 320
  • 来自: 苏州
   发表时间：2009-11-16   
<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>
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){
    obj.style.backgroundColor = '#EEFFBB'
}

function tout(obj){
    obj.style.backgroundColor = '#FFFFFF'
}

 

body{
    background-color:#ffffff;
    margin-top:0px;
    margin-left:0px;
    font-size:12px;
    font-family:宋体;
    color:#996699;
    line-height:18px;
}

.nmodiv{
    position:absolute;
    left:3px;
    top:100;
    width:135px;
    height:300px;
    border:#996699 1px solid;
    z-index:1
}

.bmodiv{
    position:absolute;
    left:-198px;
    top:-20px;
    width:185px;
    background-color:#EEFFBB;
    border:#996699 1px solid;
    padding:15 15 15 20;
    line-height:21px;
    z-index:3;
}

.modiv{
    position:relative;
    left:11px;top:145px;
    width:164px;
    height:20px;
    background-color:#ffffff;
    border:#996699 1px solid;
    padding:3 5 0 20;
    margin-bottom:12px;
    z-index:3;
}

.heads1{
    color:#cc0066;cursor:hand
}

 

效果图如下所示：

 
返回顶楼
         
  • faylai
  • 等级: 初级会员
  • 性别:
  • 文章: 68
  • 积分: 0
  • 来自: 郑州
   发表时间：2009-11-19  
这个学习倒是不错啊
返回顶楼
          回帖地址
0 请登录后投票
  • lpzp123
  • 等级: 初级会员
  • 性别:
  • 文章: 7
  • 积分: 30
  • 来自: 郑州
   发表时间：2009-11-19  
实际用处不大，学习一下可以
返回顶楼
          回帖地址
0 请登录后投票
  • zhonggeneral
  • 等级: 初级会员
  • 性别:
  • 文章: 213
  • 积分: 0
  • 来自: 广州
   发表时间：2009-11-19  
打个包来看下，你这个什么场景用得上？
返回顶楼
          回帖地址
0 请登录后投票
  • hqm1988
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 0
  • 来自: 广州
   发表时间：2009-11-19  
挺有意思的，但不知该用哪儿。
返回顶楼
          回帖地址
0 请登录后投票
  • xinnn
  • 等级: 初级会员
  • 性别:
  • 文章: 44
  • 积分: 0
  • 来自: 杭州
   发表时间：2009-11-20  
做个学习案例倒还不错，实际意义并不大
返回顶楼
          回帖地址
0 请登录后投票
  • iaimstar
  • 等级: 四星会员
  • 性别:
  • 文章: 2619
  • 积分: 450
  • 来自: 北京
   发表时间：2009-11-20  
这个东西很久以前我就见过
楼主是你原创的么？
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics