`
jsntghf
  • 浏览: 2527737 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

JS实现可拖拽的菜单

JavaScriptCSS 
阅读更多 
<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
}

 

效果图如下所示：

 

分享到：
| CSS实现图片选中加边框效果
评论
5 楼 xinnn 2009-11-20  
做个学习案例倒还不错，实际意义并不大
4 楼 hqm1988 2009-11-19  
挺有意思的，但不知该用哪儿。
3 楼 zhonggeneral 2009-11-19  
打个包来看下，你这个什么场景用得上？
2 楼 lpzp123 2009-11-19  
实际用处不大，学习一下可以
1 楼 faylai 2009-11-19  
这个学习倒是不错啊
发表评论

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

相关推荐

    JS实现的可动态拖拽的树型菜单

    本文将深入探讨如何使用JavaScript实现一个可动态拖拽的树型菜单，帮助提升网页交互体验。 首先，我们需要理解树型菜单的基本构成。每个节点（或称为项）都有一个标题，可能包含子节点，形成一个多级展开/折叠的...

    纯js实现可拖拽和点击的悬浮球

    在JavaScript编程中，创建一个可拖拽和点击的悬浮球是一项常见的交互设计任务。这个功能主要应用于各种网页应用，如在线聊天工具、控制面板或游戏等。本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们...

    jQueryUI可拖拽弹性圆形菜单.zip

    总结来说，jQuery UI可拖拽弹性圆形菜单是通过jQuery UI库、CSS3动画和JavaScript事件监听等技术实现的创新交互设计。它不仅展示了jQuery UI的强大功能，也为我们提供了一种提升网页交互性的思路。理解和掌握这些...

    Jquery实现可拖拽的树菜单

    本文将详细讲解如何利用jQuery实现一个可拖拽的树形菜单，这个功能对于构建交互性强的Web应用程序非常有用。通过JSON数据动态生成树结构，并允许用户通过拖放操作来重新组织菜单结构。 首先，我们需要理解树形菜单...

    js树形菜单实现拖动效果

    总的来说，实现JS树形菜单的拖动效果需要结合HTML、CSS、JavaScript、Ajax和XML等多种技术。这个过程涉及到DOM操作、事件处理、数据解析和用户交互设计等多个方面，对于提升Web开发技能具有很好的实践价值。在实际...

    【JavaScript源代码】JS实现圆形进度条拖拽滑动.docx

    ### JavaScript 实现圆形进度条拖拽滑动 #### 技术背景 在现代网页开发中，动态元素和交互式设计是提升用户体验的关键因素之一。其中，进度条是一种常见的UI组件，用于显示操作或任务的完成程度。传统的线性进度条...

    原生JS使用Canvas实现拖拽式绘图功能

    原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理，以下是详细解析： 1. Canvas API基础知识 - Canvas元素：HTML5新增的Canvas...

    最好最酷的可拖拽树形菜单

    在IT领域，交互性和用户体验是至关重要的因素，而“最好最酷的可拖拽树形菜单”正是这样一个致力于提升用户体验的JavaScript技术应用。这个项目利用JavaScript的动态特性，实现了用户可以自由拖动树形菜单节点的功能...

    html，js实现菜单项可拖拽

    html，js实现菜单项可拖拽

    jQuery可任意拖拽排序机构菜单树.zip

    本项目“jQuery可任意拖拽排序机构菜单树”利用jQuery的特性，实现了用户可以自由拖动菜单项来调整菜单树的顺序，这种功能在组织架构展示、权限管理或内容管理系统中非常常见。 首先，我们要理解这个项目的核心概念...

    JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序

    在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能，适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在...

    基于jquery ui可自由拖拽的弹性圆形菜单效果

    而anime.js则是一个轻量级的JavaScript动画库，它提供了强大的功能，可以实现复杂的动画效果，包括CSS属性、SVG路径、JavaScript对象等的平滑过渡。 首先，圆形菜单的设计通常是通过CSS3的border-radius属性来实现...

    tigra_menu.zip_javascript_javascript 拖动_js_浮动_级联菜单

    在描述中提到的“js实现多种浮动菜单，级联菜单，可拖动菜单”，这些都是JavaScript在网页设计中常见且重要的应用。 首先，我们来理解一下这些概念： 1. **JavaScript**: 它是Web开发的核心技术之一，可以实现在...

    基于jquery ui可自由拖拽的弹性圆形菜单效果.zip

    这款"基于jquery ui可自由拖拽的弹性圆形菜单效果"正是为了实现这样的目标而设计的。它结合了jQuery UI库的强大功能与anime.js动画库的炫酷效果，为用户带来了极具吸引力的界面交互体验。 首先，jQuery UI是一个...

    js实现拖拽删除添加功能

    在JavaScript（简称JS）编程中，拖拽删除和添加功能是一项常见的交互设计，它能提升用户体验，使得用户可以通过直观的手势来操作界面元素。本文将详细介绍如何使用纯JS实现这样的功能，以及涉及到的相关知识点。 ...

    js 特效 html 特效 鼠标拖动菜单

    js 特效 html 特效 鼠标拖动菜单 js 特效 html 特效 鼠标拖动菜单

    js+css3交互式圆形图标菜单导航代码

    在这个案例中，“js+css3交互式圆形图标菜单导航代码”就是一个很好的示例，它利用JavaScript和CSS3的强大功能，为用户提供了直观且有趣的菜单导航体验。下面将详细介绍这个项目中的核心技术和实现方式。 首先，...

    jQuery可拖动图标导航菜单.zip

    在IT行业中，jQuery是一...通过以上技术，"jQuery可拖动图标导航菜单"实现了用户友好的交互体验，使得网页的导航功能更加灵活和个性化。对于开发者而言，这是一个学习和实践jQuery、事件处理以及前端交互设计的好例子。

    JavaScript实现图片拖拽交换

    这次我们来分享一款非常实用的JS插件，它可以很方便地帮你实现在网页上拖拽图片并交换图片。和其他的拖拽插件不同，当两张图片交换时，将会出现弹动的动画特效。并且会改变被交换图片的背景颜色，以标识该图片被交换...

    jQuery可拖拽的弹性分享按钮菜单

    "jQuery可拖拽的弹性分享按钮菜单"意味着我们可以创建一个菜单，用户可以通过鼠标操作将按钮元素拖动到任意位置，同时菜单还具备弹性效果，即根据用户的行为或屏幕尺寸动态调整其大小。 1. **jQuery拖拽基础**： -...

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