例子，jQuery拖动div、移动div与弹出层。
 

  
  
      
          
            jQuery拖动div、移动div、弹出层示例  
          
          
          
          
            .moveBar {   
                position: absolute;   
                width: 250px;   
                height: 300px;   
                background: #666;   
                border: solid 1px #000;   
                right: 20px;  
            }   
              
            #banner {   
                background: #52CCCC;   
                cursor: move;   
            }  
          
      
      
        
  
            
  
                按住这里可移动当前div  
            
  
            
  
                弹出层的正文内容  
            
  
        
  
          
              
            var moveBar = ".moveBar";  
            var banner = "#banner";  
  
            jQuery(document).ready(function() {  
                $(banner).mousedown(function(event) {  
                    var isMove = true;  
                    var abs_x = event.pageX - $(moveBar).offset().left;  
                    var abs_y = event.pageY - $(moveBar).offset().top;  
                    $(document).mousemove(function(event) {  
                        if (isMove) {  
                            var obj = $(moveBar);  
                            obj.css({  
                                'left': event.pageX - abs_x,  
                                'top': event.pageY - abs_y  
                            });  
                        }  
                    }).mouseup(function() {  
                        isMove = false;  
                    });  
                });  
            });  
          
      
  
  

您可能感兴趣的文章: