jQuery實現仿Google首頁拖動效果的方法_jquery

本文執行個體講述了jQuery實現仿Google首頁拖動效果的方法。分享給大家供大家參考。具體如下：

這裡用jQuery.js庫寫了一個仿Google首頁拖動的特效代碼

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>用JQUERY實現的仿Google首頁拖動特效</title><style type="text/css"> #div_width{ width:98%; margin:0 auto; } *{ margin:0px; padding:0px; } #div_left,#div_right,#div_center{ float:left; width:28%; height:900px; margin:0 3px; } #div_center{ width:38%; } .can_move{ border:1px solid blue; width:100%; margin:5px 0; min-height:150px; } .center_width{ height:200px; } p{ height:30px; color:#fff; line-height:30px; background:#000; cursor:move; } #xuxian{ /*虛線框*/ border:1px dashed #000; margin:5px 0; } </style> <script src="js/jquery.js"></script> <script> //<![CDATA[ window.onload=function(){ var mouse_down=false; //滑鼠時候按下 var x_old=null;  //按下滑鼠時滑鼠的座標 var y_old=null; var div_move=null;  //正在移動的div var div_move_width=null; //正在移動的div的寬 var div_move_height=null; //正在移動的div的高 var xuxian="<div id='xuxian'></div>"; //虛線框 document.oncontextmenu=new Function('event.returnValue=false;'); //禁止右鍵 document.onselectstart=new Function('event.returnValue=false;'); //禁止選中 //當滑鼠按下的時候 $("p").mousedown(function(e){  mouse_down=true; //滑鼠按下  div_move=$(this).parent(); //指定當前div為正在移動的div  div_move_width=div_move.width();  div_move_height=div_move.height();  x_old=e.pageX-$(this).offset().left; //擷取滑鼠座標  y_old=e.pageY-$(this).offset().top;  //把當前div的position改成absolute  div_move.css({  position:'absolute',  zIndex:'10',  width:div_move_width,  height:div_move_height,  top:div_move.offset().top,  left:div_move.offset().left  });  //將虛線框添加到正在移動的div之前的位置  div_move.before(xuxian);  $("#xuxian").css({  width:'100%',  height:div_move_height  }); }); //移動滑鼠 $(document).mousemove(function(e){  if(!mouse_down) return false;  var _x=e.pageX;  var _y=e.pageY;  var div_right_div=$("#div_right>div").not(div_move).not("#xuxian");  div_move.css({ //改變正在移動div的top和left  top:_y-y_old,  left:_x-x_old  });/*注意,因為滑鼠當前始終在正在移動的div上面,所以,滑鼠移動不會觸發其他元素的mouseenter,mouseleave,mouseover和mouseout事件,要想達到同樣的效果,只能根據滑鼠的座標來判斷滑鼠是否進入其他元素*/  var left_left=$("#div_left").offset().left;  //確定左邊div_left容器的位置  var left_width=$("#div_left").width();  var right_left=$("#div_right").offset().left;  //確定右邊div_right容器的位置  var right_width=$("#div_right").width();  var center_left=$("#div_center").offset().left;  //確定中間div_center容器的位置  var center_width=$("#div_center").width();  //判斷滑鼠座標是否進入左邊div_left容器  if(_x>left_left&&_x<(left_left+left_width)){  /*選定左邊div_left容器下的最後一個可移動div,  不包含當前正在移動的div元素和虛線框*/  var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last");  if(div_left_last.length>=1){  //判斷時候左邊div_left容器下時候有可移動div元素   if(_y>(div_left_last.offset().top+div_left_last.height())){   //判斷滑鼠是否在左邊div_left容器最後一個元素的下邊   $("#xuxian").remove(); //如果是,移除之前添加的虛線框   div_left_last.after(xuxian);   //把虛線框添加為左邊div_left容器的最後一個子項目   $("#xuxian").css({ //設定虛線框的高和寬    width:'100%',    height:div_move_height   });   }else{   //如果滑鼠不在左邊div_left容器最後一個元素的下邊,   //那麼,迴圈判定滑鼠是否進入左邊div_left容器下的可移動div元素裡面    var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");    for(var i=0;i<div_left_div.length;i++){    if(_y>div_left_div.eq(i).offset().top&&(_y<div_left_div.eq(i).offset().top+div_left_div.eq(i).height())){     $("#xuxian").remove();     //如果是,刪除之前添加的虛線框     div_left_div.eq(i).before(xuxian);     //把虛線框添加到當前滑鼠進入的div元素的前面     $("#xuxian").css({ //設定虛線框的高和寬     width:'100%',     height:div_move_height     });     break; //退出迴圈    }    }   }   }else{//如果左邊div_left容器下面沒有任何可移動div元素   var div_left_div=$("#div_left>div").not(div_move).not("#xuxian");   if(div_left_div.length==0){    $("#xuxian").remove(); //移除之前添加的虛線框    $("#div_left").append(xuxian);    //把虛線框添加為左邊div_left容器的子項目    $("#xuxian").css({    width:'100%',    height:div_move_height    });   }  }  }else if(_x>center_left&&_x<(center_left+center_width)){  //判斷滑鼠是否進入中間div_center容器  /*選定中間div_center容器下的最後一個可移動div,  不包含當前正在移動的div元素和虛線框*/  var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last");  if(div_center_last.length>=1){  //判斷中間div_center容器的下面時候有可移動div子項目   if(_y>(div_center_last.offset().top+div_center_last.height())){   //判斷滑鼠是否在中間div_center容器的最後一個可移動div子項目的下邊   $("#xuxian").remove();   //如果是,刪除之前添加的虛線框   div_center_last.after(xuxian);   //把虛線框添加為中間div_center容器的最後一個div子項目   $("#xuxian").css({ //設定虛線框的寬和高    width:'100%',    height:div_move_height   });   }else{   //如果滑鼠不在中間div_center容器最後一個可移動div子項目的下邊,   //則迴圈判斷滑鼠進入的是哪一個iv子項目    var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");    for(var i=0;i<div_center_div.length;i++){    if(_y>div_center_div.eq(i).offset().top&&(_y<div_center_div.eq(i).offset().top+div_center_div.eq(i).height())){     $("#xuxian").remove();     //找到滑鼠進入的div子項目,刪除之前添加的虛線框     div_center_div.eq(i).before(xuxian);     //把虛線框添加到當前滑鼠進入的div子項目的前面     $("#xuxian").css({     //設定虛線框的寬度和高度     width:'100%',     height:div_move_height     });     break; //退出迴圈    }    }   }   }else{   //如果中間div_center容器的中間沒有可移動的div子項目   var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");    if(div_center_div.length==0){    $("#xuxian").remove();    //刪除之前添加的虛線框    $("#div_center").append(xuxian);    //把虛線框添加為中間div_center的最後一個div元素    $("#xuxian").css({    width:'100%',    height:div_move_height    });   }  }  }else if(_x>right_left&&_x<(right_left+right_width)){  //判斷滑鼠是否進入右邊div_right容器  /*選定右邊div_right容器下的最後一個可移動div,  不包含當前正在移動的div元素和虛線框*/  var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last");  if(div_right_last.length>=1){  //判斷右邊div_right容器下邊是否有可移動的div子項目   if(_y>(div_right_last.offset().top+div_right_last.height())){   //判斷滑鼠時候在右邊div_right容器最後一個可移動div元素的下邊   $("#xuxian").remove();   //如果是,刪除之前添加的虛線框   div_right_last.after(xuxian);   //添加虛線框為右邊div_right容器的最後一個元素   $("#xuxian").css({   //設定虛線框的寬和高    width:'100%',    height:div_move_height   });   }else{   //如果滑鼠不在右邊div_right容器最後一個可移動div元素的下邊,   //則迴圈判斷滑鼠進入到右邊div_right容器下哪個可移動div元素裡面    for(var i=0;i<div_right_div.length;i++){    if(_y>div_right_div.eq(i).offset().top&&(_y<div_right_div.eq(i).offset().top+div_right_div.eq(i).height())){     $("#xuxian").remove();     //找到滑鼠進入的div元素,刪除之前添加的虛線框     div_right_div.eq(i).before(xuxian);     //把虛線框添加到滑鼠進入的div元素的前面     $("#xuxian").css({     //設定寬和高     width:'100%',     height:div_move_height     });     break;     //退出迴圈    }    }   }   }else{   //如果右邊div_right元素的下邊沒有可移動的div子項目   if(div_right_div.length==0){    $("#xuxian").remove();    //刪除之前添加的虛線框    $("#div_right").append(xuxian);    //把虛線框添加為右邊div_right容器的子項目    $("#xuxian").css({    //設定虛線框的寬和高    width:'100%',    height:div_move_height    });   }  }  } }).mouseup(function(){  mouse_down=false; //滑鼠鬆開  $("#xuxian").before(div_move);  //將當前正在移動的div元素添加到虛線框的前面  div_move.css({  //更改正在移動div元素的position和寬  position:'static',  width:'100%'  });  $("#xuxian").remove();  //刪除虛線框  return false; }); } //]]> </script></head><body> <div id="div_width"> <div id="div_left">  <div class="can_move">  <p>音樂</p>  </div>  <div class="can_move">  <p>活動</p>  </div> </div> <div id="div_center">  <div class="can_move center_width">  <p>科技</p>  </div> </div> <div id="div_right">  <div class="can_move">  <p>新聞</p>  </div>  <div class="can_move">  <p>元素</p>  </div> </div> </div></body></html>

希望本文所述對大家的jQuery程式設計有所協助。