jQuery实现仿Google首页拖动效果的方法

前端技术 2023/09/01 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/2755

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案