当前位置:首页 > 转自点点  >> 用jQ实现浮动窗口功能,弹出窗口时背景变暗
24日

用jQ实现浮动窗口功能,弹出窗口时背景变暗

作者:皇家元林 时间:2012年08月24日 围观者: 103 人 【0条评论】

html代码

  
      
      浮动窗口  
          
          
          
          
      
      
              
              
            
这只是一个演示标题[ x ]
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.
---This is edited by Alp.

JS代码

function drag(overFlow,title){   
        title.onmousedown = function(evt){   
            var doc = document;   
            var evt = evt || window.event;   
            var x = evt.offsetX?evt.offsetX:evt.layerX;   
            var y = evt.offsetY?evt.offsetY:evt.layerY;   
            if(overFlow.setCapture){   
                overFlow.setCapture();   
            }else if(window.captureEvents){   
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   
            }   
         
            doc.onmousemove = function(evt){   
                evt = evt || window.event;   
                var xPosition = evt.pageX || evt.clientX;   
                var yPosition = evt.pageY || evt.clientY;   
                var newX = xPosition - x;   
                var newY = yPosition - y;   
                overFlow.style.left = newX;   
                overFlow.style.top =  newY;   
            };   
         
            doc.onmouseup = function(){   
                if(overFlow.releaseCapture){   
                    overFlow.releaseCapture();   
                }else if(window.captureEvents){   
                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   
                }   
                doc.onmousemove=null;   
                doc.onmouseup=null;   
            };   
        };   
  }

css代码

#over{   
        position: absolute;   
        left: 300px;   
        top: 200px;   
        border: 1px solid black;   
        display: none;   
        background: #cccccc;   
        cursor: default;   
        width: 300px;   
        z-index: 10;   
        opacity: 1;   
    }   
           
    #title{   
        border: 1px solid #1840C4;   
        background:  #95B4DC;   
        padding: 2px;   
        font-size:12px;   
        cursor: default;   
    }   
           
    #close{   
        cursor: pointer;   
        margin-right: 1px;   
        overflow: hidden;   
    }   
           
    #content{   
        border: 1px solid #C2D560;   
        background: #EFF4D7;   
    }   
           
    #t{   
        margin-right:145px;   
    }   
           
    #mask{   
        z-index: 1;   
        background: #fff;   
        width: 1024px;   
        height: 800px;   
    }   
           
    #b{   
        position: absolute;   
        left: 200px;   
        top: 100px;   
    }   
           
    body{   
        padding: 0px;   
        margin: 0px;   
    }   
           
    #over{   
        background: transparent;   
    }

原文:http://blog.csdn.net/charonking/article/details/3629323

标签:, , ,

Leave a Reply



2227