zoukankan      html  css  js  c++  java

  • 有趣的自由拖动菜单形式

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    <!--
    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;
            135px;
            height:600px;
            border:#996699 1px solid;
            z-index:1}
    .bmodiv{position:absolute;
            left:-198px;
            top:-20px;
            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;
           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}        

    /*.modiv{behavior:url(smm.htc)}*/
    -->
    </style>


    <script>
    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]='n06'
    ason[6]='n07'
    ason[7]='n08'
    ason[8]='n09'
    ason[9]='n10'
    ason[10]='n11'
    ason[11]='n12'
    ason[12]='n13'
    ason[13]='b01'
    ason[14]='b02'
    ason[15]='b03'
    ason[16]='b04'
    ason[17]='b05'
    ason[18]='b06'
    ason[19]='b07'
    ason[20]='b08'
    ason[21]='b09'
    ason[22]='b10'
    ason[23]='b11'
    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'
    }//背景控制

    </script>

    <title>ss－www.51windows.Net</title>
    </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">孙燕姿 [ 16 首 ]</span>  
    <div  class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. Leave me alone

    02. 爱情证书

    03. 爱情字典

    04. 不是真的爱我

    05. 超快感

    06. 乘着风

    07. 风筝

    08. 开始懂了

    09. 零缺点

    10. 绿光

    11. 任性

    12. 随堂测验

    13. 逃亡

    14. 天黑黑

    15. 我是我

    16. 我要的幸福

    </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">蔡依林 [ 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="n03"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">候湘婷 [ 18 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. 暧昧

    02. 都是真的

    03. 风晓得

    04. 好想遇见爱情

    05. 黑眼圈

    06. 冷战

    07. 两个冬天

    08. 没有爱过

    09. 你爱我吗

    10. 秋天别来

    11. 秋天以后的故事

    12. 为你流的泪

    13. 我不

    14. 我是一只鱼

    15. 我要看热闹

    16. 心想飞

    17. 一起去巴黎

    18. 原来是你

    </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">那　英 [ 08 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. 不管有多苦

    02. 出卖

    03. 梦醒了

    04. 梦一场

    05. 我不是天使

    06. 心酸的浪漫

    07. 一笑而过

    08. 愿赌服输

    </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">王　菲 [ 07 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. 给自己的情书

    02. 光之翼

    03. 红豆

    04. 流年

    05. 香奈儿

    06. 笑忘书

    07. 执迷不悔

    </div>
    </div>

    <div class="modiv" id="n06"
    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="n07"
    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="n08"
    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="n09"
    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>

    <div class="modiv" id="n10"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">粱咏琪 [ 18 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. Amour

    02. G For Girl

    03. Kiss me

    04. suddenly,this Summer

    05. 胆小鬼

    06. 短发

    07. 花火

    08. 简单生活

    09. 全年无休

    10. 如果不是爱上你

    11. 他喜欢的是你

    12. 天使与海豚

    13. 凹凸

    14. 许愿

    15. 烟雾弥漫

    16. 有时侯

    17. 中意他

    18. 走出地平线

    </div>
    </div>

    <div class="modiv" id="n11"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">萧亚轩 [ 14 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. Cappuccino

    02. Let It Go

    03. Lonely

    04. Never Look Back

    05. Remember

    06. 窗外的天气

    07. 明天

    08. 蔷薇

    09. 上钩了

    10. 甩了甩了

    11. 突然想起你

    12. 一个人的精彩

    13. 准备好了没有

    14. 最熟悉的陌生人

    </div>
    </div>

    <div class="modiv" id="n12"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">郑秀文 [ 13 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. 本能承受的感动

    02. 独家试唱

    03. 感情线上

    04. 眉飞色舞

    05. 你这个男人

    06. 如何掉眼泪

    07. 煞科

    08. 天衣无缝

    09. 完整

    10. 萤光粉红

    11. 值得

    12. 至理名言

    13. 终身美丽

    </div>
    </div>

    <div class="modiv" id="n13"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">林忆莲 [ 12 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. Better Man

    02. 存在

    03. 飞的理由

    04. 寂寞流形群

    05. 铿锵玫瑰

    06. 理由

    07. 默读伤悲

    08. 伤痕

    09. 我坐在这里

    10. 相见不如怀念

    11. 野风

    12. 至少还有你

    12. 男人哭不卡不不是最

    </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. I believe

    02. Sexbaby

    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">张信哲 [ 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="b03"
    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="b04"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">郭富城 [ 13 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. Para Para Sakura

    02. 爱定你

    03. 唱这歌

    04. 动起来

    05. 风里密码

    06. 活的好

    07. 狂野之城

    08. 旅途

    09. 天涯凝望

    10. 铁幕诱惑

    11. 我是不是该安静的走开

    12. 无忌未来

    13. 争气<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">张学友 [ 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="b06"
    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="b07"
    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. 281公里

    02. Sense

    03. 爱上了你

    04. 不耐烦

    05. 够了没有

    06. 活着VIVA

    07. 今生共相伴

    08. 你不会了解

    09. 前前后后左左右右

    10. 潜龙勿用

    11. 谁哭了

    12. 我们这里还有鱼

    13. 无声仿有声

    14. 香水

    15. 谢谢你的爱1999

    16. 一击即中

    17. 因为爱所以爱

    18. 游乐场

    19. 玉蝴蝶<p><p>
    </div>
    </div>

    <div class="modiv" id="b08"
    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>

    <div class="modiv" id="b09"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">任贤齐 [ 22 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. 爱很疯

    02. 不单爱你这些

    03. 不要变

    04. 春天花会开

    05. 对面的女孩看过来

    06. 飞鸟

    07. 风暴

    08. 给你幸福

    08. 花太香

    10. 橘子香水

    11. 浪花一朵朵

    12. 流着泪的你的眼

    13. 任逍遥

    14. 伤心太平洋

    15. 水晶

    16. 天使也一样

    17. 天涯

    18. 小雪

    19. 心情车站

    20. 心太软

    21. 拯救心田

    22. 烛光<p><p>
    </div>
    </div>

    <div class="modiv" id="b10"
    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. 爱似狂潮

    02. 爱一个人好难

    03. 男人不该让女人流泪

    04. 相遇太早

    05. 幸福离我们很静

    06. 意犹未尽

    07. 越吻越伤心<p><p>
    </div>
    </div>

    <div class="modiv" id="b11"
    onMouseOver="tover(this)"
    onMouseOut="tout(this)"
        onMouseMove="moves()"
        onMouseUp="this.releaseCapture();zz=0;tout(this)"
        onMouseDown="find(this);nomoves()">
    <span class="heads1">周杰伦 [ 12 首 ]</span>
    <div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
    01. 爱在西元前

    02. 安静

    03. 爸！我回来了

    04. 斗牛

    05. 黑色幽默

    06. 简单爱

    07. 可爱女人

    08. 龙卷风

    09. 娘子

    10. 完美主义

    11. 威廉古堡

    12. 星晴<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>
    <a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>
  • 相关阅读:
    WINFORM中的COMBOX模糊查询
    C#的XML序列化及反序列化
    C#调用webservice简单实例
    ORACLE简单触发器
    关于搭建webservice以及无法通过URL访问的简易解决办法
    URL类型入参串调用接口
    起点
    dom的操作
    固定定位
    字体、文本属性和背景图定位
  • 原文地址：https://www.cnblogs.com/liuguanghuiyes/p/1286553.html
Copyright © 2011-2022 走看看