你好！欢迎光临领航科技
专注于沈阳网站建设、沈阳网站制作、沈阳网页设计等网络服务
| 收藏本站 | 设为首页 | 网站地图
    网站首页 关于我们 新闻动态 域名注册 虚拟主机 网站建设 成功案例 软件开发 联系我们    
　本站公告
　网络常识
　常见问题
　网站优化


　当前位置：首页 > 新闻动态
【网站弹出层并随滚动而动 】
来源：www.024linghang.com 发布者：沈阳网站建设 　发布时间：2011-9-27　
　

弹出层

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3. <head>  
  4.     <title></title>  
  5.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
  6.     <style type="text/css">  
  7.         *{margin:0;padding:0;}  
  8.         body{background:#fff;font-size:12px;}  
  9.         .drag_wrap{width:500px;height:300px;position:absolute;border:1px solid #ccc;display:none;z-index:3;background:#fff;}  
  10.         .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;}  
  11.         .drag_wrap h1 span{position:absolute;font-size:12px;bottom:1px;right:10px;cursor:pointer;}  
  12.         .drag_cont{padding:10px;line-height:23px;text-indent:2em;}  
  13.         .mask{position:absolute;left:0;top:0;z-index:2;background:#000;filter:alpha(opacity=50);opacity: 0.5;}  
  14.         .in{margin:50px auto;width:80px;}  
  15.     </style>  
  16. </head>  
  17. <body>  
  18.     <div class="in"><input type="button" value="猛击我" onclick="drag.init().move(drag)" /></div>  
  19.     <div class="in"><a href="###" onclick="drag.init(drag2).move(drag2)">铁道部回应京沪高铁频出故障：设备处于磨合期</a></div>  
  20.       
  21.     <div id="drag2" class="drag_wrap">  
  22.         <h1>铁道部回应京沪高铁频出故障<span>关闭</span></h1>  
  23.         <div class="drag_cont">  
  24.             <p>各位网友好！首先我要感谢人民网强国论坛为我提供与广大网友再聚的机会。在我来之前，看了许多网友的留言，其中就有一位网友提醒我要做好挨骂和挨拍的准备。是的，今天来到这里，就是代表铁路系统向大家真诚道歉、说明情况。京沪高铁开通半个月以来，总体客流和服务情况是好的。但近几天连续发生故障，影响列车正常运行</p>  
  25.             <p>6月30日，京沪高铁开通运营。请您介绍一下总体运营情况，比如开行列车数量、运送旅客人数、正点率、安全情况等。</p>  
  26.         </div>  
  27.     </div>  
  28.       
  29.     <script type="text/javascript">  
  30.         var drag = {  
  31.             $: function(){ return document.getElementById(arguments[0]);},  
  32.               
  33.             /** 
  34.              * 得到视口的大小 
  35.              */  
  36.             getWindowsSize: function(){  
  37.                 var de = document.documentElement,  
  38.                     pageWidth = window.innerWidth,  
  39.                     pageHeight = window.innerHeight;  
  40.                 if(typeof pageWidth != number){ //如果pageWidth不是数字,则ie,非ie支持innerWidth   
  41.                     if(document.compatMode == CSS1Compat){ //Standars mode 标准模式，完整dtd   
  42.                         pageWidth = de.clientWidth;  
  43.                         pageHeight = de.clientHeight;  
  44.                     } else { //如果是 Quirks mode   
  45.                         pageWidth = document.body.clientWidth;  
  46.                         pageHeight = document.body.clientHeight;  
  47.                     }  
  48.                 }  
  49.                 return {  
  50.                     width: pageWidth,  
  51.                     height: pageHeight  
  52.                 }  
  53.             },  
  54.               
  55.             /** 
  56.              * 创建标签 
  57.              * @param {String} target 标签名称，为空则创建一个空的div 
  58.              * @param {Object} config 属性列表 
  59.              */  
  60.             createElement: function(target, config){  
  61.                 target = target || div;  
  62.                 config = config || {};  
  63.                   
  64.                 var tag = document.createElement(target);  
  65.                 for(var p in config){  
  66.                     if(p.toLowerCase() == style){  
  67.                         tag.style.cssText = config[p];  
  68.                     } else if(p.toLowerCase() == class || p.toLowerCase() == cls){  
  69.                         tag.className = config[p];  
  70.                     } else if(p.toLowerCase() == innerHTML){  
  71.                         tag.innerHTML = config[p];  
  72.                     } else {  
  73.                         tag.setAttribute(p, config[p]);  
  74.                     }  
  75.                 }  
  76.                 //此处try为释放tag引用，否则创建的DOM永远无法被释放   
  77.                 try{  
  78.                     return tag;  
  79.                 } finally {  
  80.                     tag = null;  
  81.                 }  
  82.             },  
  83.               
  84.             getEvent: function(event){  
  85.                 return event ? event : window.event;  
  86.             },  
  87.               
  88.             init: function(id){  
  89.                 var that = this,  
  90.                     ele = this.$(id) || false,  
  91.                     winWidth = this.getWindowsSize().width,  
  92.                     winHeight = this.getWindowsSize().height;  
  93.                   
  94.                 if(!ele) {  
  95.                     ele = this.createElement(div, {  
  96.                         id: drag,  
  97.                         cls: drag_wrap  
  98.                     });  
  99.                     var h1 = this.createElement(h1);  
  100.                     h1.innerHTML = 我是标题栏;  
  101.                     var span = this.createElement(span);  
  102.                     span.innerHTML = 关闭;  
  103.                     var cont = this.createElement(div, {  
  104.                         cls: drag_cont  
  105.                     });  
  106.                     cont.innerHTML = <p>上半年，面对复杂多变的国际形势和国内经济运行出现的新情况新问题，党中央、国务院坚持实施积极的财政政策和稳健的货币政策，不断加强和改善宏观调控，经济运行总体良好，继续朝着宏观调控预期方向发展。</p><p>初步测算，上半年国内生产总值204459亿元，按可比价格计算，同比增长9.6%；其中，一季度增长9.7%，二季度增长9.5%。分产业看，第一产业增加值15700亿元，增长3.2%；第二产业增加值102178亿元，增长11.0%；第三产业增加值86581亿元，增长9.2%。从环比看，二季度国内生产总值增长2.2%。</p>;  
  107.                       
  108.                     h1.appendChild(span);  
  109.                     ele.appendChild(h1);  
  110.                     ele.appendChild(cont);  
  111.                     //ele.style.display = block;   
  112.                       
  113.                     document.body.appendChild(ele);  
  114.                       
  115.                     span.onclick = function(){  
  116.                         document.body.removeChild(ele);  
  117.                         document.body.removeChild(oMask);  
  118.                     }  
  119.                 } else {  
  120.                     var handler = ele.getElementsByTagName(h1)[0],  
  121.                         close = handler.getElementsByTagName(span)[0];  
  122.                           
  123.                     close.onclick = function(){  
  124.                         ele.style.display = none;  
  125.                         document.body.removeChild(oMask);  
  126.                     }  
  127.                 }  
  128.                   
  129.                 var oMask = this.createElement(div, {  
  130.                     cls: mask  
  131.                 });  
  132.                 oMask.style.cssText = width: + winWidth + px;height: + winHeight + px;;  
  133.                   
  134.                 document.body.appendChild(oMask);  
  135.                   
  136.                 ele.style.display = block;  
  137.                 ele.style.left = (winWidth - ele.offsetWidth)/2 + px;  
  138.                 ele.style.top = (winHeight - ele.offsetHeight)/2 + px;  
  139.                   
  140.                 return this;  
  141.             },  
  142.               
  143.             move: function(id){  
  144.                 var that = this,  
  145.                     ele = this.$(id),  
  146.                     winWidth = this.getWindowsSize().width,  
  147.                     winHeight = this.getWindowsSize().height,  
  148.                     posx,  
  149.                     poy;  
  150.                   
  151.                 if(!ele) return false;  
  152.                   
  153.                 var handler = ele.getElementsByTagName(h1)[0],  
  154.                     close = handler.getElementsByTagName(span)[0];  
  155.                 handler.onmousedown = function(e){  
  156.                     evt = that.getEvent(e);  
  157.                     posx = evt.clientX - parseInt(ele.style.left);  
  158.                     posy = evt.clientY - parseInt(ele.style.top);  
  159.                       
  160.                     if (handler.setCapture) { //防止ie下拖动过快丢失对象   
  161.                         handler.setCapture();  
  162.                     } else if (window.captureEvents) {  
  163.                         window.captureEvents(e.MOUSEMOVE | e.MOUSEUP);  
  164.                     }  
  165.                       
  166.                     document.onmousemove = function(e){  
  167.                         e = that.getEvent(e);  
  168.                         var l = e.clientX - posx,  
  169.                             t = e.clientY - posy;  
  170.                               
  171.                         if(l < 0){  
  172.                             l = 0;  
  173.                         } else if(l > winWidth - ele.offsetWidth){  
  174.                             l = winWidth - ele.offsetWidth;  
  175.                         }  
  176.                           
  177.                         if(t < 0){  
  178.                             t = 0;  
  179.                         } else if(t > winHeight - ele.offsetHeight){  
  180.                             t = winHeight - ele.offsetHeight;  
  181.                         }  
  182.                           
  183.                         ele.style.left = l + px;  
  184.                         ele.style.top = t + px;  
  185.                           
  186.                         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消选择文本   
  187.                     }  
  188.                 };  
  189.                   
  190.                 document.onmouseup = function(e){  
  191.                     e = that.getEvent(e);  
  192.                       
  193.                     if (handler.releaseCapture) {  
  194.                         handler.releaseCapture();  
  195.                     } else if (window.captureEvents) {  
  196.                         window.captureEvents(e.MOUSEMOVE | e.MOUSEUP);  
  197.                     }  
  198.                       
  199.                     document.onmousemove = null;  
  200.                 };  
  201.                   
  202.                 return this;  
  203.             },  
  204.               
  205.             close: function(id){  
  206.                 var that = this,  
  207.                     ele = this.$(id);  
  208.                       
  209.                 if(!ele) return false;  
  210.                 ele.style.display = none;  
  211.             }  
  212.         }  
  213.           
  214.     </script>  
  215. </body>  
下一篇：论网站建设市场
推荐文章
沈阳传媒集团与我公司签订网站制作合同 [2011-9-27]
论网站建设市场 [2011-9-27]
百度快点来收录我吧 [2011-9-26]
网站建设中的改版问题 [2011-9-26]
网站建设中框架的使用 [2011-9-26]
网站建设中表单的使用 [2011-9-26]
关于我们 | 新闻动态 | 域名注册 | 虚拟主机 | 成功案例 | 软件开发 | 联系我们 | 网站地图
Copyright @ 2005-2011 024linghang.com All Right Reserved
领航科技版权所有 联系电话：1384053919