jQuery實現(xiàn)仿Google首頁拖動效果的方法

更新時間：2015年05月04日 15:33:54 投稿：shichen2014

這篇文章主要介紹了jQuery實現(xiàn)仿Google首頁拖動效果的方法,涉及jQuery操作鼠標事件及div層的相關技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)仿Google首頁拖動效果的方法。分享給大家供大家參考。具體如下：

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>用JQUERY實現(xiàn)的仿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上面,
所以,鼠標移動不會觸發(fā)其他元素的mouseenter,mouseleave,mouseover
和mouseout事件,要想達到同樣的效果,
只能根據(jù)鼠標的坐標來判斷鼠標是否進入其他元素*/
  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容器最后一個元素的下邊,
   //那么,循環(huán)判定鼠標是否進入左邊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; //退出循環(huán)
    }
    }
   }
   }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子元素的下邊,
   //則循環(huán)判斷鼠標進入的是哪一個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; //退出循環(huán)
    }
    }
   }
   }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元素的下邊,
   //則循環(huán)判斷鼠標進入到右邊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;
     //退出循環(huán)
    }
    }
   }
   }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程序設計有所幫助。

您可能感興趣的文章:

利用jQuery解析獲取JSON數(shù)據(jù)
這篇文章主要為大家詳細介紹了利用jQuery解析獲取JSON數(shù)據(jù)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
淺析jQuery Mobile的初始化事件
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當前人氣最高的JavaScript庫,需要的朋友可以參考下
2015-12-12
jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作示例
這篇文章主要介紹了jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作,結合實例形式分析了jQuery+Ajax請求json格式數(shù)據(jù)并渲染到html頁面相關步驟與操作技巧,需要的朋友可以參考下
2020-06-06
jquery ajax 調(diào)用失敗的原因示例介紹
jquery 在使用ajax過程中出現(xiàn)調(diào)用失敗的情況，想必大家都有遇到過吧，在本文有個不錯的示例，希望對大家有所幫助
2013-09-09
jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果,涉及jQuery事件響應及頁面元素屬性動態(tài)變換操作技巧,需要的朋友可以參考下
2016-09-09
jQuery第一次運行頁面默認觸發(fā)點擊事件的實例
下面小編就為大家分享一篇jQuery第一次運行頁面默認觸發(fā)點擊事件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jQuery樹形插件jquery.simpleTree.js用法分析
這篇文章主要介紹了jQuery樹形插件jquery.simpleTree.js用法,結合實例形式分析了jQuery樹形菜單插件jquery.simpleTree.js的功能與基本用法,需要的朋友可以參考下
2016-09-09
jquery實現(xiàn)點擊瀏覽器返回上一頁按鈕并能直接刷新
這篇文章主要介紹了jquery實現(xiàn)點擊瀏覽器返回上一頁按鈕并能直接刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
jQuery點擊后一組圖片左右滑動的實現(xiàn)代碼
主要是用作圖片展示的時候需要，點擊后一組圖片左右滑動，需要的朋友可以參考下
2012-08-08
jquery實現(xiàn)簡單每周輪換的日歷
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單每周輪換的日歷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09