- 浏览: 2482909 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
jsntghf:
peio 写道这个怎么运行?Ruby On Rails的环境搭 ...
多文件上传之uploadify -
peio:
这个怎么运行?
多文件上传之uploadify -
往事如烟1:
我的项目是自己init了一个原始的project,之后将ver ...
React Native热部署之CodePush -
jsntghf:
往事如烟1 写道我按照你的说明进行,发现app退出之后,在进入 ...
React Native热部署之CodePush -
往事如烟1:
我按照你的说明进行,发现app退出之后,在进入不正确,请问是什 ...
React Native热部署之CodePush
<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 }
效果图如下所示:
评论
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
这个学习倒是不错啊
发表评论
-
密码输入延迟屏蔽
2013-05-19 20:06 1430这是一个类似iPhone、android等手机的密码输入体 ... -
日历控件
2012-06-29 20:12 1533<link rel="styleshee ... -
渐变打分条
2011-11-05 10:33 1626<!DOCTYPE html PUBLIC &qu ... -
滚动新闻
2011-10-28 15:17 1117<div id="marquees" ... -
网页配色
2011-10-10 09:18 1690至于为什么要使用网页配色工具,而不是自己配色,主要原因就是:对 ... -
圆角文本框的实现
2011-10-09 09:22 3349<!DOCTYPE HTML PUBLIC " ... -
javascript加载xml,在chrome下失败的解决办法
2011-09-30 09:40 4721原来的写法: this.loadxml = funct ... -
可输入文本的下拉框
2011-09-28 13:14 1329<html> <head> ... -
二级树形菜单
2011-09-25 11:34 1290<!DOCTYPE html PUBLIC &qu ... -
不规则菜单
2011-09-16 09:31 1288<!DOCTYPE html PUBLIC " ... -
二级树形菜单
2011-09-13 19:11 1275<!DOCTYPE html PUBLIC &qu ... -
随机显示图片
2011-09-10 18:13 1296<!DOCTYPE html PUBLIC " ... -
滚动字幕效果
2011-09-07 17:40 1389<!DOCTYPE html PUBLIC " ... -
美化select
2011-09-06 16:50 1303<!DOCTYPE html PUBLIC " ... -
无图片圆角
2011-09-05 15:10 1357<!DOCTYPE HTML PUBLIC " ... -
设置滚动条的颜色
2011-08-11 10:01 1687<style type="text/css&q ... -
CSS细线表格
2011-08-09 13:23 1505<style type="text/css&q ... -
分页效果
2011-08-06 19:52 1252<!DOCTYPE html PUBLIC &qu ... -
FormTools
2011-06-23 09:17 1349FormTools is a collection of ut ... -
表单当前行高亮的实现
2011-06-21 12:06 1410<!DOCTYPE html PUBLIC " ...
相关推荐
一个非常好用的JavaScript实现的可动态拖拽的树型菜单,推荐
jQuery实现可拖拽的树菜单,根据json数据实现可拖拽操作,可直接运用于项目中
jQuery UI可拖拽弹性圆形菜单是一款可以通过点击一个圆形按钮来弹出4个子菜单按钮。
html,js实现菜单项可拖拽
js树形菜单(可拖动效果) 所采用的技术是ajax+xml 若是读后台数据的话,首先得打包成xml文件,具体格式参照samples下面的tree.xml
用JAVASCRIPT实现的可拖拽的树形菜单。效果非常炫酷。使用简单。
js实现多种浮动菜单,级联菜单,可拖动菜单
js 特效 html 特效 鼠标拖动菜单 js 特效 html 特效 鼠标拖动菜单
这次我们来分享一款非常实用的JS插件,它可以很方便地帮你实现在网页上拖拽图片并交换图片。和其他的拖拽插件不同,当两张图片交换时,将会出现弹动的动画特效。并且会改变被交换图片的背景颜色,以标识该图片被交换...
jQuery可任意拖拽排序机构菜单树,菜单可任意拖动。
js 特效 html 特效 拖动的超酷菜单 js 特效 html 特效 拖动的超酷菜单
纯js实现拖拽删除添加功能,有示例,简单实用
用JavaScript操作Cookie实现菜单保存的一个实例,如果你正在编写一个JS层拖动的功能,那么这段代码可以帮你实现拖动位置的保存,让浏览器去保存用户拖动网页某个层的位置
jQuery可拖动图标导航菜单是一款jquery fixed页面固定div可拖动图标导航菜单效果。
原创亲测至少节约小白两天时间,本人前端小白搞了好几天才实现表格拖动排序。在网上找的(vue3+sortable.js根本跑不起来)网上好多例子在vue3下根据跑不起来于是,也没有对表格排序的例子。Vuedraggable 是基于并...
RecyclerView进阶使用-实现仿支付宝菜单编辑页面拖拽功能, 这个是改版后的代码,代码包更小。 详细的说明在http://blog.csdn.net/cjs1534717040/article/details/78459821, 现在将这个代码设为免费,谢谢支持
RecyclerView进阶使用-实现仿支付宝菜单编辑页面拖拽功能,详细的说明在http://blog.csdn.net/cjs1534717040/article/details/78459821,有积分的给个积分,没积分的给我发邮件,发帖不易,谢谢支持 没积分的,可以看...
javascript实现表格的单元格拖动排序,对实现图片的拖动排序有启发
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
这是一款基于jquery ui的可自由拖拽的弹性圆形菜单效果。该圆形菜单可以通过点击一个圆形按钮来弹出4个子菜单按钮。弹性效果由anime.js来制作,效果非常炫酷。