会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
博客园
首页
新随笔
联系
订阅
管理
随笔 - 338
文章 - 0
评论 - 1081
阅读 -
228万
弹出拖动层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> *{margin:0;padding:0;} body{background:#fff;font-size:12px;} .drag_wrap{width:500px;height:300px;position:absolute;border:1px solid #ccc;display:none;z-index:3;background:#fff;} .drag_wrap h1{position:relative;height:35px;line-height:35px;text-indent:1em;font-size:14px;cursor:move;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;} .drag_wrap h1 span{position:absolute;font-size:12px;bottom:1px;right:10px;cursor:pointer;} .drag_cont{padding:10px;line-height:23px;text-indent:2em;} .mask{position:absolute;left:0;top:0;z-index:2;background:#000;filter:alpha(opacity=50);opacity: 0.5;} .in{margin:50px auto;width:80px;} </style> </head> <body> <div class="in"><input type="button" value="猛击我" onclick="drag.init().move('drag')" /></div> <div class="in"><a href="###" onclick="drag.init('drag2').move('drag2')">铁道部回应京沪高铁频出故障:设备处于磨合期</a></div> <div id="drag2" class="drag_wrap"> <h1>铁道部回应京沪高铁频出故障<span>关闭</span></h1> <div class="drag_cont"> <p>各位网友好!首先我要感谢人民网强国论坛为我提供与广大网友再聚的机会。在我来之前,看了许多网友的留言,其中就有一位网友提醒我要做好挨骂和挨拍的准备。是的,今天来到这里,就是代表铁路系统向大家真诚道歉、说明情况。京沪高铁开通半个月以来,总体客流和服务情况是好的。但近几天连续发生故障,影响列车正常运行</p> <p>6月30日,京沪高铁开通运营。请您介绍一下总体运营情况,比如开行列车数量、运送旅客人数、正点率、安全情况等。</p> </div> </div> <script type="text/javascript"> var drag = { $: function(){ return document.getElementById(arguments[0]);}, /** * 得到视口的大小 */ getWindowsSize: function(){ var de = document.documentElement, pageWidth = window.innerWidth, pageHeight = window.innerHeight; if(typeof pageWidth != 'number'){ //如果pageWidth不是数字,则ie,非ie支持innerWidth if(document.compatMode == 'CSS1Compat'){ //Standars mode 标准模式,完整dtd pageWidth = de.clientWidth; pageHeight = de.clientHeight; } else { //如果是 Quirks mode pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } return { width: pageWidth, height: pageHeight } }, /** * 创建标签 * @param {String} target 标签名称,为空则创建一个空的div * @param {Object} config 属性列表 */ createElement: function(target, config){ target = target || 'div'; config = config || {}; var tag = document.createElement(target); for(var p in config){ if(p.toLowerCase() == 'style'){ tag.style.cssText = config[p]; } else if(p.toLowerCase() == 'class' || p.toLowerCase() == 'cls'){ tag.className = config[p]; } else if(p.toLowerCase() == 'innerHTML'){ tag.innerHTML = config[p]; } else { tag.setAttribute(p, config[p]); } } //此处try为释放tag引用,否则创建的DOM永远无法被释放 try{ return tag; } finally { tag = null; } }, getEvent: function(event){ return event ? event : window.event; }, init: function(id){ var that = this, ele = this.$(id) || false, winWidth = this.getWindowsSize().width, winHeight = this.getWindowsSize().height; if(!ele) { ele = this.createElement('div', { id: 'drag', cls: 'drag_wrap' }); var h1 = this.createElement('h1'); h1.innerHTML = '我是标题栏'; var span = this.createElement('span'); span.innerHTML = '关闭'; var cont = this.createElement('div', { cls: 'drag_cont' }); cont.innerHTML = '<p>上半年,面对复杂多变的国际形势和国内经济运行出现的新情况新问题,党中央、国务院坚持实施积极的财政政策和稳健的货币政策,不断加强和改善宏观调控,经济运行总体良好,继续朝着宏观调控预期方向发展。</p><p>初步测算,上半年国内生产总值204459亿元,按可比价格计算,同比增长9.6%;其中,一季度增长9.7%,二季度增长9.5%。分产业看,第一产业增加值15700亿元,增长3.2%;第二产业增加值102178亿元,增长11.0%;第三产业增加值86581亿元,增长9.2%。从环比看,二季度国内生产总值增长2.2%。</p>'; h1.appendChild(span); ele.appendChild(h1); ele.appendChild(cont); //ele.style.display = 'block'; document.body.appendChild(ele); span.onclick = function(){ document.body.removeChild(ele); document.body.removeChild(oMask); } } else { var handler = ele.getElementsByTagName('h1')[0], close = handler.getElementsByTagName('span')[0]; close.onclick = function(){ ele.style.display = 'none'; document.body.removeChild(oMask); } } var oMask = this.createElement('div', { cls: 'mask' }); oMask.style.cssText = 'width:' + winWidth + 'px;height:' + winHeight + 'px;'; document.body.appendChild(oMask); ele.style.display = 'block'; ele.style.left = (winWidth - ele.offsetWidth)/2 + 'px'; ele.style.top = (winHeight - ele.offsetHeight)/2 + 'px'; return this; }, move: function(id){ var that = this, ele = this.$(id), winWidth = this.getWindowsSize().width, winHeight = this.getWindowsSize().height, posx, poy; if(!ele) return false; var handler = ele.getElementsByTagName('h1')[0], close = handler.getElementsByTagName('span')[0]; handler.onmousedown = function(e){ evt = that.getEvent(e); posx = evt.clientX - parseInt(ele.style.left); posy = evt.clientY - parseInt(ele.style.top); if (handler.setCapture) { //防止ie下拖动过快丢失对象 handler.setCapture(); } else if (window.captureEvents) { window.captureEvents(e.MOUSEMOVE | e.MOUSEUP); } document.onmousemove = function(e){ e = that.getEvent(e); var l = e.clientX - posx, t = e.clientY - posy; if(l < 0){ l = 0; } else if(l > winWidth - ele.offsetWidth){ l = winWidth - ele.offsetWidth; } if(t < 0){ t = 0; } else if(t > winHeight - ele.offsetHeight){ t = winHeight - ele.offsetHeight; } ele.style.left = l + 'px'; ele.style.top = t + 'px'; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消选择文本 } return false; //感谢清流鱼提出解决办法 }; document.onmouseup = function(e){ e = that.getEvent(e); if (handler.releaseCapture) { handler.releaseCapture(); } else if (window.captureEvents) { window.captureEvents(e.MOUSEMOVE | e.MOUSEUP); } document.onmousemove = null; }; return this; }, close: function(id){ var that = this, ele = this.$(id); if(!ele) return false; ele.style.display = 'none'; } } </script> </body> </html>
chorme下cursor:move样式丢失,感谢清流鱼提出解决办法,但还未搞清原理,记之。
运行代码
分类:
JavaScript
好文要顶
关注我
收藏该文
微信分享
豪情
粉丝 -
3291
关注 -
43
+加关注
0
0
升级成为会员
«
上一篇:
Javascript高级程序设计第二版第十章--DOM--笔记
»
下一篇:
Javascript高级程序设计第二版第十一章--DOM2,DOM3--笔记
posted @
2010-08-23 00:08
豪情
阅读(
1210
) 评论(
1
)
编辑
收藏
举报
刷新页面
返回顶部
登录后才能查看或发表评论,立即
登录
或者
逛逛
博客园首页
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
编辑推荐:
·
如何编写易于单元测试的代码
·
10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
·
.NET Core 中如何实现缓存的预热?
·
从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
·
AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
·
周边上新:园子的第一款马克杯温暖上架
·
Open-Sora 2.0 重磅开源!
·
.NET周刊【3月第1期 2025-03-02】
·
分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
·
[AI/GPT/综述] AI Agent的设计模式综述
公告
昵称:
豪情
园龄:
15年3个月
粉丝:
3291
关注:
43
+加关注
<
2010年8月
>
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
搜索
我的标签
Javascript高程第二版--笔记
(12)
javascript
(9)
zen coding
(5)
WebStorm
(4)
css
(3)
精通javascript
(3)
JavaScriptDOM高级程序设计
(2)
资源
(2)
网址导航
(2)
zp
(1)
更多
随笔分类
(339)
CSS(32)
JavaScript(159)
Jquery(35)
Month(9)
Other(53)
PHP(3)
SublimeText(4)
Tool(13)
UI(12)
Vim(4)
Vue(2)
WebStorm/PhpStorm(13)
随笔档案
(337)
2019年5月(2)
2016年2月(1)
2016年1月(1)
2015年11月(1)
2015年10月(2)
2015年9月(3)
2015年7月(1)
2015年6月(1)
2015年5月(1)
2015年4月(3)
2015年2月(1)
2015年1月(5)
2014年12月(4)
2014年11月(8)
2014年10月(8)
2014年9月(1)
2014年6月(1)
2014年3月(9)
2014年1月(1)
2013年12月(3)
2013年5月(1)
2013年4月(4)
2013年3月(8)
2013年1月(1)
2012年12月(4)
2012年11月(1)
2012年10月(2)
2012年8月(4)
2012年7月(3)
2012年6月(1)
2012年4月(2)
2012年3月(8)
2012年2月(3)
2012年1月(1)
2011年12月(6)
2011年11月(1)
2011年7月(3)
2011年6月(5)
2011年5月(1)
2011年4月(1)
2011年3月(12)
2011年2月(1)
2011年1月(2)
2010年12月(7)
2010年11月(2)
2010年10月(5)
2010年9月(7)
2010年8月(14)
2010年7月(10)
2010年6月(14)
2010年5月(46)
2010年4月(19)
2010年3月(19)
2010年2月(7)
2010年1月(7)
2009年12月(48)
更多
link
豪情-Java
james
stevenlevithan
paulirish--jquery team
我是程序员
Aaron
VaJoy Larn
阅读排行榜
1. 1. web前端开发分享-css,js入门篇(168106)
2. web前端开发分享-目录(120242)
3. 如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作(113116)
4. 前端开发利器webStorm 3.0配置使用(105933)
5. 4. web前端开发分享-css,js工具篇(94351)
6. 在sublime-text中设置浏览器预览(83304)
7. 我们前端跟后端是怎么合作的(80429)
8. JS的构造函数(74046)
9. 超强JavaScript编辑器webstorm主题(theme)(68478)
10. 我们前端是怎么找到工作的(66026)
评论排行榜
1. JS高级前端开发群加群说明及如何晋级(67)
2. 豪情-2015年阅读书籍分享[上](57)
3. 网上分享知识和帮助他人,自己有什么收获?(53)
4. 经典黑色--网站管理界面(38)
5. 我们前端是怎么找到工作的(34)
6. 豪情-关于生活工作学习之感悟-第一篇(33)
7. 前端应聘要准备些什么样子的作品?(29)
8. css 填坑常用代码分享(29)
9. 超强JavaScript编辑器webstorm主题(theme)(29)
10. 年后跳槽如何准备?(28)
推荐排行榜
1. 我们前端是怎么找到工作的(77)
2. web前端开发分享-目录(74)
3. 豪情-关于生活工作学习之感悟-第一篇(54)
4. 年后跳槽如何准备?(53)
5. css 填坑常用代码分享(51)
最新评论
1. Re:超强JavaScript编辑器webstorm主题(theme)
现在还能用吗?在win10上?
--香荣如梦
2. Re:豪情-2014年年终总结
向豪哥学习
--王小伞
3. Re:JS高级前端开发群加群说明及如何晋级
上海-时间前来报道
--你灬哪位
4. Re:6. web前端开发分享-css,js移动篇
感谢
--不爱学习不爱运动
5. Re:我们前端跟后端是怎么合作的
时至今日偶然看见此片老文章,读着评论,感觉像和古人交互一样,这种感觉如同穿越一般,令人着迷啊。
--LBAMSG_1
点击右上角即可分享
SQL AI 助手
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述