有趣的自由拖动菜单形式
<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;
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>
<script>
function all(){
event.returnValue=false;
}
document.οncοntextmenu=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" οnclick="allm(ball)">男歌</div>
<p id="hhh2" style="position:absolute;left:400;top:130" οnclick="allm(gall)"">女歌</p>
</body>
</html>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>
转载于:https://www.cnblogs.com/liuguanghuiyes/archive/2008/09/08/1286553.html
有趣的自由拖动菜单形式相关推荐
- android 浮动文字提示,怎么在Android中实现一个自由拖动并显示文字的悬浮框
怎么在Android中实现一个自由拖动并显示文字的悬浮框 发布时间:2021-01-27 15:34:05 来源:亿速云 阅读:107 作者:Leah 今天就跟大家聊聊有关怎么在Android中实现一 ...
- 在Flash MX中实现自由拖动图片和改变图片
在Authorware中实现拖动图片及改变图片的大小,这对于交互型的课件是非常重要的.那么,在Flash中可不可以实现以上的功能呢?答案是肯定的,Flash凭借强大的ActionScript脚本语言, ...
- wincc报表 日报表 月报表 年报表 时段报表 报表表格 宽度可以自由配置，报表界面大小可以自由拖动大小，报表参数方便配置，不需要任何编程，适用wincc任何版本
wincc报表 功能如下: 日报表:每日24点数据,如果设置的是累计值,计算每小时的差值,和最终汇总一日总累计 月报表:每日0点数据显示,如果设置的是累计值,计算每日的差值,和最终汇总一月总累计 年报 ...
- VB6.0 控件自由拖动
VB6.0 控件自由拖动 有时,在编写代码的时候,可能需要一个浮动的界面(根据用户需求,实时拖动),下面将介绍如何实现 1.首先要修改控件的DragMode模式为0.如下图所示: '注意,以下代码可以 ...
- Visual Studio 2017 ASP.NET在设计WEB页面时让控件可以自由拖动
我对DIV/CSS一窍不通,时间紧急,需要完成WEB页面设计,因此想到了偷懒的方法,如果使用Visual Studio 2017 ASP.NET在设计WEB页面时让控件可以自由拖动,那就太好啦! 一. ...
- git菜单形式的_全新的导航形式:全屏菜单
与其他用户界面细节一样,菜单的设计也在随着当今的潮流改变.一些变化能带来积极的效果,改善用户体验,还有一些却会破坏有利的形象.追随潮流是件棘手的事,尤其是在菜单上. 比如,隐藏式菜单和极简式导航栏最近 ...
- 可拖动菜单 【总结】
需求 应老罗的要求,做一个可拖动的长条形列表菜单. 这是原来的样子 进入编辑界面,它的编辑添加都不能实时更新,而且操作起来比较麻烦. 所以我估计一下应该有这些需求: 1.修改,取消,确认按钮 2.点击 ...
- 弹出页（指定高度，自由拖动，点击空白包括状态栏触发）
iOS指定高度弹出页.可拖动,点击空白包括状态栏收回 1.首先需要指定弹出页面的高度: /**页面高度*/func groundHeight() -> CGFloat {return Slide ...
- git菜单形式的_Idea:Git的常用菜单操作和常用命令
工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...
最新文章
- R语言dplyr包mutate_if函数修改所有满足条件的数据列的内容实战
- ERROR while rich displaying an object: Error: Continuous value supplied to discrete scale
- 大数据处理过程中，如何让Hadoop运行得更快一些？
- FPGA设计心得（3）Aurora IP core 的理论学习记录
- Scala中Manifest、ClassTag、TypeTag的学习
- 微信朋友圈：应对春节千亿访问量背后的故事
- IOS - JSON数据解析 小3种方法
- HDU——1418抱歉（平面欧拉公式）
- OAuth2.0授权码模式原理与实战
- List的Stream流操作
- AI 开发者如何摆脱只有“人工”没有“智能？
- 如何在Adobe Illustrator中矢量化图像
- 什么样的简历，面试官一看就知道多少水份！！！
- Ekho TTS 5.1发布
- HBase（二）——下载 HBase
- 《那些年啊，那些事——一个程序员的奋斗史》——113
- ＜C语言＞简单表白代码小❤❤
- 搜索引擎介绍系列——数据采集
- Heartbeat+DRBD+MySQL高可用方案
- Julia实现GCC-PHAT算法