论坛首页 → 入门技术论坛 →

拖曳层!

浏览 2182 次
锁定老帖子 主题：拖曳层!
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • hipeace87
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 20
  • 来自: 山东菏泽
   发表时间：2009-02-05   最后修改：2009-02-05
  1. <html>
  2. <head>
  3. <title></title>
  4. </head>
  5. <body>
  6.   <p onclick = "ShowDivWin()">点下我
  7. </body>
  8. <script language="javascript" type="text/javascript">
  9. /* @author Nieger Dai
  10. @date 2007.11.15
  11.  */
  12. var isIe = ( document.all ) ? true : false;
  13. var moveable = false;
  14. var topDivBorderColor = "#336699";
  15. // 提示窗口的边框颜色
  16. var topDivBgColor = "#6795B4";
  17. // 提示窗口的标题的背景颜色
  18. var contentBgColor = "white";
  19. // 内容显示窗口的背景颜色
  20. var contentFontColor = "black";
  21. // 内容显示窗口字体颜色
  22. var titleFontColor = "white";
  23. // 弹出窗口标题字体颜色
  24. var index = 10000;
  25. // z - index;
  26. // 创建弹出窗口，构造函数
  27. function DivWindow( id, title, w, h, content )
  28. {
  29.    this.id = id;
  30.    // 窗口id
  31.    this.zIndex = index + 2;
  32.    this.title = title;
  33.    // 弹出窗口名称
  34.    this.message = content;
  35.    // 弹出窗口内容
  36.    this.width = w;
  37.    // 弹出窗口宽度
  38.    this.height = h;
  39.    // 弹出窗口高度
  40.    this.left = ( document.body.clientWidth ) ? ( document.body.clientWidth - this.width ) / 2 : 0;
  41.    // 弹出窗口位置，距屏幕左边的位置
  42.    this.top = ( document.body.clientHeight ) ? ( document.body.clientHeight - this.height ) / 2 : 0;
  43.    // 弹出窗口位置，距屏幕上边的位置
  44.    // this.init = init;
  45.    // this.init();
  46. }
  47. //  ---------------------------------------
  48. // 根据构造函数设定初始值，创建弹出窗口
  49. DivWindow.prototype =
  50. {
  51.    // 设置弹出窗口标题字体颜色
  52.    setPopupTopTitleFontColor : function( tFontColor )
  53.    {
  54.       titleFontColor = tFontColor;
  55.    }
  56.    ,
  57.    // 设置弹出窗口标题背景颜色
  58.    setPopupTopBgColor : function( tBgColor )
  59.    {
  60.       topDivBgColor = tBgColor;
  61.    }
  62.    ,
  63.    // 设置弹出窗口风格, 包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色
  64.    setPopupColor : function( borderColor, bgColor, tFontColor, cBgColor, fColor )
  65.    {
  66.       topDivBorderColor = borderColor;
  67.       topDivBgColor = bgColor;
  68.       titleFontColor = tFontColor;
  69.       contentBgColor = cBgColor;
  70.       contentFontColor = fColor;
  71.    }
  72.    ,
  73.    // 打开一个弹出窗口
  74.    open : function()
  75.    {
  76.       var sWidth, sHeight;
  77.       sWidth = document.body.clientWidth;
  78.       sHeight = document.body.clientHeight;
  79.       var bgObj = document.createElement( "div" );
  80.       bgObj.setAttribute( 'id', 'window' + this.id );
  81.       var styleStr = "top:0px;left:0px;position:absolute;background:#245;width:" + sWidth + "px;height:" + sHeight + "px;";
  82.       styleStr += ( isIe ) ? "filter:alpha(opacity=0);" : "opacity:0;";
  83.       bgObj.style.cssText = styleStr;
  84.       document.body.appendChild( bgObj );
  85.       // 让背景逐渐变暗
  86.       //showBackground( bgObj, 25 );
  87.       // 弹出窗口框体背景容器
  88.       var windowTopBgDiv = document.createElement( "div" );
  89.       windowTopBgDiv.setAttribute( 'id', 'windowTopBg' + this.id );
  90.       windowTopBgDiv.style.position = "absolute";
  91.       windowTopBgDiv.style.zIndex = this.zIndex ;
  92.       windowTopBgDiv.style.width = this.width ;
  93.       windowTopBgDiv.style.height = this.height;
  94.       windowTopBgDiv.style.left = this.left;
  95.       windowTopBgDiv.style.top = this.top;
  96.       windowTopBgDiv.style.background = topDivBgColor;
  97.       windowTopBgDiv.style.fontSize = "9pt";
  98.       windowTopBgDiv.style.cursor = "default";
  99.       windowTopBgDiv.style.border = "1px solid " + topDivBorderColor;
  100.       windowTopBgDiv.attachEvent( "onmousedown", function()
  101.       {
  102.          if( windowTopBgDiv.style.zIndex != index )
  103.          {
  104.             indexindex = index + 2;
  105.             var idx = index;
  106.             windowTopBgDiv.style.zIndex = idx;
  107.          }
  108.       }
  109.       );
  110.       // 弹出窗口头部框体
  111.       var windowTopDiv = document.createElement( "div" );
  112.       windowTopDiv.setAttribute( 'id', 'windowTop' + this.id );
  113.       windowTopDiv.style.position = "absolute";
  114.       windowTopDiv.style.background = topDivBgColor;
  115.       // "white";
  116.       windowTopDiv.style.color = titleFontColor;
  117.       windowTopDiv.style.cursor = "move";
  118.       windowTopDiv.style.height = 20;
  119.       windowTopDiv.style.width = this.width - 2 * 2;
  120.       // 开始拖动;
  121.       windowTopDiv.attachEvent( "onmousedown", function()
  122.       {
  123.          if( event.button == 1 )
  124.          {
  125.             // 锁定标题栏;
  126.             windowTopDiv.setCapture();
  127.             // 定义对象;
  128.             var win = windowTopDiv.parentNode;
  129.             // 记录鼠标和层位置;
  130.             x0 = event.clientX;
  131.             y0 = event.clientY;
  132.             x1 = parseInt( win.style.left );
  133.             y1 = parseInt( win.style.top );
  134.             // 记录颜色;
  135.             // topDivBgColor = windowTopDiv.style.backgroundColor;
  136.             // 改变风格;
  137.             // windowTopDiv.style.backgroundColor = topDivBorderColor;
  138.             win.style.borderColor = topDivBorderColor;
  139.             moveable = true;
  140.          }
  141.       }
  142.       );
  143.       // 停止拖动
  144.       windowTopDiv.attachEvent( "onmouseup", function()
  145.       {
  146.          if( moveable )
  147.          {
  148.             var win = windowTopDiv.parentNode;
  149.             win.style.borderColor = topDivBgColor;
  150.             windowTopDiv.style.backgroundColor = topDivBgColor;
  151.             windowTopDiv.releaseCapture();
  152.             moveable = false;
  153.          }
  154.       }
  155.       );
  156.       // 开始拖动
  157.       windowTopDiv.attachEvent( "onmousemove", function()
  158.       {
  159.           if( moveable )
  160.          {
  161.             var win = windowTopDiv.parentNode;
  162.             win.style.left = x1 + event.clientX - x0;
  163.             win.style.top = y1 + event.clientY - y0;
  164.             var objRith = parseInt(win.style.left,10) + parseInt(win.style.width,10);
  165.             var objButton = parseInt(win.style.top,10) + parseInt(win.style.height,10);
  166.             if(parseInt(win.style.left,10) <= 0)
  167.             {
  168.              win.style.left = 1 ;
  169.             }
  170.             if(parseInt(win.style.top,10) <= 0)
  171.             {
  172.              win.style.top = 1 ;
  173.             }
  174.             if ( objRith >= document.body.clientWidth )
  175.             {
  176.                win.style.left = document.body.clientWidth - parseInt(win.style.width) - 1;
  177.             }
  178.             if ( objButton >= document.body.clientHeight )
  179.             {
  180.                win.style.top = document.body.clientHeight - parseInt(win.style.height) - 1;
  181.             }
  182.          }
  183.       }
  184.       );
  185.       // 双击弹出窗口
  186.       windowTopDiv.attachEvent( "ondblclick", function()
  187.       {
  188.          maxOrMinPopupDiv( windowTopOperateSpan, windowContentDiv );
  189.       }
  190.       );
  191.       // 增加一个弹出窗口标题的显示
  192.       var windowTopTitleSpan = document.createElement( "span" );
  193.       windowTopTitleSpan.setAttribute( 'id', 'windowTopTitle' + this.id );
  194.       windowTopTitleSpan.style.width = this.width - 2 * 12 - 4;
  195.       windowTopTitleSpan.style.paddingLeft = "3px";
  196.       windowTopTitleSpan.innerHTML = this.title;
  197.       // 增加一个弹出窗口最小化，最大化的操作
  198.       var windowTopOperateSpan = document.createElement( "span" );
  199.       windowTopOperateSpan.setAttribute( 'id', 'windowTopOperate' + this.id );
  200.       windowTopOperateSpan.style.width = 12;
  201.       windowTopOperateSpan.style.borderWidth = "0px";
  202.       windowTopOperateSpan.style.color = titleFontColor;
  203.       // "white";
  204.       windowTopOperateSpan.style.fontFamily = "webdings";
  205.       windowTopOperateSpan.style.cursor = "default";
  206.       windowTopOperateSpan.innerHTML = "0";
  207.       // 最大化或者最小化弹出窗口操作
  208.       windowTopOperateSpan.attachEvent( "onclick", function()
  209.       {
  210.          maxOrMinPopupDiv( windowTopOperateSpan, windowContentDiv );
  211.       }
  212.       );
  213.       // 增加一个弹出窗口关闭的操作
  214.       var windowTopCloseSpan = document.createElement( "span" );
  215.       windowTopCloseSpan.setAttribute( 'id', 'windowTopClose' + this.id );
  216.       windowTopCloseSpan.style.width = 12;
  217.       windowTopCloseSpan.style.borderWidth = "0px";
  218.       windowTopCloseSpan.style.color = titleFontColor;
  219.       // "white";
  220.       windowTopCloseSpan.style.fontFamily = "webdings";
  221.       windowTopCloseSpan.style.cursor = "default";
  222.       windowTopCloseSpan.innerHTML = "r";
  223.       // 关闭窗口
  224.       windowTopCloseSpan.attachEvent( "onclick", function()
  225.       {
  226.          windowTopDiv.removeChild( windowTopTitleSpan );
  227.          windowTopDiv.removeChild( windowTopOperateSpan );
  228.          windowTopDiv.removeChild( windowTopCloseSpan );
  229.          windowTopBgDiv.removeChild( windowTopDiv );
  230.          windowTopBgDiv.removeChild( windowContentDiv );
  231.          document.body.removeChild( windowTopBgDiv );
  232.          document.body.removeChild( bgObj );
  233.       }
  234.       );
  235.       // 内容
  236.       var windowContentDiv = document.createElement( "div" );
  237.       windowContentDiv.setAttribute( 'id', 'windowContent' + this.id );
  238.       windowContentDiv.style.background = contentBgColor;
  239.       windowContentDiv.style.color = contentFontColor;
  240.       windowContentDiv.style.cursor = "default";
  241.       windowContentDiv.style.height = ( this.height - 20 - 6 );
  242.       windowContentDiv.style.width = "100%";
  243.       windowContentDiv.style.position = "relative";
  244.       windowContentDiv.style.left = 0;
  245.       windowContentDiv.style.top = 24;
  246.       windowContentDiv.style.lineHeight = "20px";
  247.       windowContentDiv.style.fontSize = "10pt";
  248.       windowContentDiv.style.wordBreak = "break-all";
  249.       windowContentDiv.style.padding = "3px";
  250.       windowContentDiv.innerHTML = this.message;
  251.       // 将内容写入到文件中
  252.       windowTopDiv.appendChild( windowTopTitleSpan );
  253.       windowTopDiv.appendChild( windowTopOperateSpan );
  254.       windowTopDiv.appendChild( windowTopCloseSpan );
  255.       windowTopBgDiv.appendChild( windowTopDiv );
  256.       windowTopBgDiv.appendChild( windowContentDiv );
  257.       document.body.appendChild( windowTopBgDiv );
  258.    }
  259. }
  260. //  ---------------------------------------
  261. // 最大或者最小化弹出窗口
  262. function maxOrMinPopupDiv( windowTopOperateSpan, windowContentDiv )
  263. {
  264.    var win = windowTopOperateSpan.parentNode.parentNode;
  265.    var tit = windowTopOperateSpan.parentNode;
  266.    var flg = windowContentDiv.style.display == "none";
  267.    if( flg )
  268.    {
  269.       win.style.height = parseInt( windowContentDiv.style.height ) + parseInt( tit.style.height ) + 2 * 2;
  270.       windowContentDiv.style.display = "block";
  271.       windowTopOperateSpan.innerHTML = "0";
  272.    }
  273.    else
  274.    {
  275.       win.style.height = parseInt( tit.style.height ) + 2 * 2;
  276.       windowTopOperateSpan.innerHTML = "2";
  277.       windowContentDiv.style.display = "none";
  278.    }
  279. }
  280. //  ---------------------------------------
  281. // 让背景渐渐变暗
  282. function showBackground( obj, endInt )
  283. {
  284.    if( isIe )
  285.    {
  286.       obj.filters.alpha.opacity += 1;
  287.       if( obj.filters.alpha.opacity < endInt )
  288.       {
  289.          setTimeout( function()
  290.          {
  291.             this.showBackground( obj, endInt )
  292.          }
  293.          , 5 );
  294.       }
  295.    }
  296.    else
  297.    {
  298.       var al = parseFloat( obj.style.opacity );
  299.       al += 0.01;
  300.       obj.style.opacity = al;
  301.       if( al < ( endInt / 100 ) )
  302.       {
  303.          setTimeout( function()
  304.          {
  305.             this.showBackground( obj, endInt )
  306.          }
  307.          , 5 );
  308.       }
  309.    }
  310. }
  311. //  ---------------------------------------
  312. // 关闭弹出窗口
  313. function closeDivWindow( id )
  314. {
  315.    var windowTopTitleSpan = document.getElementById( "windowTopTitle" + id );
  316.    var windowTopOperateSpan = document.getElementById( "windowTopOperate" + id );
  317.    var windowTopCloseSpan = document.getElementById( "windowTopClose" + id );
  318.    var windowTopDiv = document.getElementById( "windowTop" + id );
  319.    var windowTopBgDiv = document.getElementById( "windowTopBg" + id );
  320.    var windowContentDiv = document.getElementById( "windowContent" + id );
  321.    var bgObj = document.getElementById( "window" + id );
  322.    windowTopDiv.removeChild( windowTopTitleSpan );
  323.    windowTopDiv.removeChild( windowTopOperateSpan );
  324.    windowTopDiv.removeChild( windowTopCloseSpan );
  325.    windowTopBgDiv.removeChild( windowTopDiv );
  326.    windowTopBgDiv.removeChild( windowContentDiv );
  327.    document.body.removeChild( windowTopBgDiv );
  328.    document.body.removeChild( bgObj );
  329. }
  330. //  ---------------------------------------
  331.  function ShowDivWin()
  332.  {
  333.   var w = new DivWindow("DivWin","标题",400,300,"按住标题可拖动 <br> 双击标题试一下?<br>       不能把我移出边框吧!! O(∩_∩)O");
  334.     w.open();
  335.   }
  336. </script>
  337. </html>
返回顶楼
         
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics