zoukankan
html css js c++ java
弹出拖动层
<!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{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;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 { 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 = '' + 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样式丢失,感谢清流鱼提出解决办法,但还未搞清原理,记之。
运行代码
查看全文
相关阅读:
js 中读取JSON的方法探讨
git 教程 git.oschina.net
JS实现页面跳转重定向的几种方式
AngularJs 学习
firebug js版
emmt html生成
idea sass scss配置
关于idea激活
sublime text There are no packages 解决!
js监听滚动条事件
原文地址:https://www.cnblogs.com/jikey/p/1806059.html
最新文章
判断JS对象是否拥有某属性
sublime text 几种常用插件
sublime text snippet代码片断
css media
html特殊字符
ejs 基本语法
Jquery 点击空白处消失
gulp使用
node http.request请求
node http.get请求
热门文章
express 安装与卸载
gulp安装
js判断是否在iframe中
基于nodejs的消息中心
iframe
socket.io 实例
查看Jquery版本
交互设计“五要素”
颜色rgb
idea 配置node Run
Copyright © 2011-2022 走看看