search

Home >Web Front-end >JS Tutorial >How to implement jQuery imitation of Google homepage drag effect_jquery

How to implement jQuery imitation of Google homepage drag effect_jquery

WBOY
WBOYOriginal
2016-05-16 16:01:121241browse

The example in this article describes the method of using jQuery to imitate the Google homepage drag effect. Share it with everyone for your reference. The details are as follows:

Here I used the jQuery.js library to write a special effect code that imitates Google homepage dragging

<!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>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A simple way to implement multi-line strings in javascript_javascript skillsNext article：A simple way to implement multi-line strings in javascript_javascript skills

Related articles

See more