2顶

菜单变换与拖动

稿源：互联网 2022-04-07 14:45:25 点击： 1211 撤稿纠错

菜单的变换与拖动效果，点击中间男女歌手弹出菜单，之后可以拖动左边的菜单。

以下讨论的是和特效相关的菜单变换与拖动教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

脚本说明:
把如下代码加入<body>区域中
<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;
        width:135px;
        height:600px;
        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}

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

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>
<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<br>
02. 爱情证书<br>
03. 爱情字典<br>
04. 不是真的爱我<br>
05. 超快感<br>
06. 乘着风<br>
07. 风筝<br>
08. 开始懂了<br>
09. 零缺点<br>
10. 绿光<br>
11. 任性<br>
12. 随堂测验<br>
13. 逃亡<br>
14. 天黑黑<br>
15. 我是我<br>
16. 我要的幸福<br>
</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<br>
02. Don't Stop<br>
03. Lucky Number<br>
04. 爱上了一条街<br>
05. 感觉你的存在<br>
06. 如过不想要<br>
07. 我知道你很难过<br>
</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. 暧昧<br>
02. 都是真的<br>
03. 风晓得<br>
04. 好想遇见爱情<br>
05. 黑眼圈<br>
06. 冷战<br>
07. 两个冬天<br>
08. 没有爱过<br>
09. 你爱我吗<br>
10. 秋天别来<br>
11. 秋天以后的故事<br>
12. 为你流的泪<br>
13. 我不<br>
14. 我是一只鱼<br>
15. 我要看热闹<br>
16. 心想飞<br>
17. 一起去巴黎<br>
18. 原来是你<br>
</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. 不管有多苦<br>
02. 出卖<br>
03. 梦醒了<br>
04. 梦一场<br>
05. 我不是天使<br>
06. 心酸的浪漫<br>
07. 一笑而过<br>
08. 愿赌服输<br>
</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. 给自己的情书<br>
02. 光之翼<br>
03. 红豆<br>
04. 流年<br>
05. 香奈儿<br>
06. 笑忘书<br>
07. 执迷不悔<br>
</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. 成全<br>
02. 到处乱走<br>
03. 对面男生的房间<br>
04. 很爱很爱你<br>
05. 后来<br>
06. 决定<br>
07. 年华<br>
08. 收获<br>
09. 为爱痴狂<br>
</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. 不如跳舞<br>
02. 飞吧<br>
03. 花花宇宙<br>
04. 记事本<br>
05. 情不自禁<br>
06. 三秒钟<br>
07. 数到三就不哭<br>
08. 随身听<br>
09. 星期五档案<br>
</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. 爱你不是两三天<br>
02. 如果有一天<br>
03. 闪亮的星<br>
04. 勇气<br>
</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. 爱上了<br>
02. 美丽心情<br>
03. 一点点力量<br>
04. 有时候没时候<br>
05. 真好！我要的爱情<br>
</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<br>
02. G For Girl<br>
03. Kiss me<br>
04. suddenly,this Summer<br>
05. 胆小鬼<br>
06. 短发<br>
07. 花火<br>
08. 简单生活<br>
09. 全年无休<br>
10. 如果不是爱上你<br>
11. 他喜欢的是你<br>
12. 天使与海豚<br>
13. 凹凸<br>
14. 许愿<br>
15. 烟雾弥漫<br>
16. 有时侯<br>
17. 中意他<br>
18. 走出地平线<br>
</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<br>
02. Let It Go<br>
03. Lonely<br>
04. Never Look Back<br>
05. Remember<br>
06. 窗外的天气<br>
07. 明天<br>
08. 蔷薇<br>
09. 上钩了<br>
10. 甩了甩了<br>
11. 突然想起你<br>
12. 一个人的精彩<br>
13. 准备好了没有<br>
14. 最熟悉的陌生人<br>
</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. 本能承受的感动<br>
02. 独家试唱<br>
03. 感情线上<br>
04. 眉飞色舞<br>
05. 你这个男人<br>
06. 如何掉眼泪<br>
07. 煞科<br>
08. 天衣无缝<br>
09. 完整<br>
10. 萤光粉红<br>
11. 值得<br>
12. 至理名言<br>
13. 终身美丽<br>
</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<br>
02. 存在<br>
03. 飞的理由<br>
04. 寂寞流形群<br>
05. 铿锵玫瑰<br>
06. 理由<br>
07. 默读伤悲<br>
08. 伤痕<br>
09. 我坐在这里<br>
10. 相见不如怀念<br>
11. 野风<br>
12. 至少还有你<br>
12. 男人哭不卡不不是最<br>
</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<br>
02. Sexbaby<br>
03. 爱你的全部<br>
04. 把你藏起来<br>
05. 把你宠坏<br>
06. 别担心<br>
07. 彩虹<br>
08. 跟着我一辈子<br>
09. 救我<br>
10. 跑远<br>
11. 情人<br>
12. 束缚<br>
13. 天真<br>
14. 忘了他<br>
15. 无心伤害<br>
16. 像自在的风<br>
17. 眼神<br>
18. 只想念着你<br>
19. 做我的情人
</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<br>
02. 爱不留<br>
03. 爱就一个字<br>
04. 爱情的余味<br>
05. 爱如潮水<br>
06. 别怕我伤心<br>
07. 不要对他说<br>
08. 不做你的爱人<br>
09. 等风的旗<br>
10. 过火<br>
11. 宽容<br>
12. 难以抗拒你容颜<br>
13. 太想爱你<br>
14. 我是真的爱你<br>
15. 信仰<br>
16. 用情<br>
17. 有一点动心<br>
18. 找钥匙<br>
19. 直觉
</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. 爱情新活力<br>
02. 苯小孩<br>
03. 冰雨<br>
04. 男朋友<br>
05. 男人哭吧哭吧不是罪<br>
06. 说话的哑巴<br>
07. 天意<br>
08. 忘情谁<br>
09. 相思成灾<br>
10. 心蓝<br>
11. 真永远
</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<br>
02. 爱定你<br>
03. 唱这歌<br>
04. 动起来<br>
05. 风里密码<br>
06. 活的好<br>
07. 狂野之城<br>
08. 旅途<br>
09. 天涯凝望<br>
10. 铁幕诱惑<br>
11. 我是不是该安静的走开<br>
12. 无忌未来<br>
13. 争气
</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. 当我想起你<br>
02. 等你回来<br>
03. 你好毒<br>
04. 如果这都不算爱<br>
05. 天气那么热<br>
06. 忘记你我做不到<br>
07. 心如刀割<br>
08. 一千个伤心的理由
</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<br>
02. 爱天爱地<br>
03. 全日爱<br>
04. 重爱轻友
</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公里<br>
02. Sense<br>
03. 爱上了你<br>
04. 不耐烦<br>
05. 够了没有<br>
06. 活着VIVA<br>
07. 今生共相伴<br>
08. 你不会了解<br>
09. 前前后后左左右右<br>
10. 潜龙勿用<br>
11. 谁哭了<br>
12. 我们这里还有鱼<br>
13. 无声仿有声<br>
14. 香水<br>
15. 谢谢你的爱1999<br>
16. 一击即中<br>
17. 因为爱所以爱<br>
18. 游乐场<br>
19. 玉蝴蝶
</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. 爱我的人很我爱的人<br>
02. 地下铁<br>
03. 五月的雪<br>
04. 下沙<br>
05. 一天一万年
</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. 爱很疯<br>
02. 不单爱你这些<br>
03. 不要变<br>
04. 春天花会开<br>
05. 对面的女孩看过来<br>
06. 飞鸟<br>
07. 风暴<br>
08. 给你幸福<br>
08. 花太香<br>
10. 橘子香水<br>
11. 浪花一朵朵<br>
12. 流着泪的你的眼<br>
13. 任逍遥<br>
14. 伤心太平洋<br>
15. 水晶<br>
16. 天使也一样<br>
17. 天涯<br>
18. 小雪<br>
19. 心情车站<br>
20. 心太软<br>
21. 拯救心田<br>
22. 烛光
</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. 爱似狂潮<br>
02. 爱一个人好难<br>
03. 男人不该让女人流泪<br>
04. 相遇太早<br>
05. 幸福离我们很静<br>
06. 意犹未尽<br>
07. 越吻越伤心
</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. 爱在西元前<br>
02. 安静<br>
03. 爸！我回来了<br>
04. 斗牛<br>
05. 黑色幽默<br>
06. 简单爱<br>
07. 可爱女人<br>
08. 龙卷风<br>
09. 娘子<br>
10. 完美主义<br>
11. 威廉古堡<br>
12. 星晴
</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)"">女歌

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于菜单变换与拖动的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080719272.shtml方便下次再访问哦。

·上一篇： 按钮选择导航
·下一篇： 点击展开的下拉菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

菜单变换与拖动

文章分类LIST >>返回首页

最新游戏

最新新闻