首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 04, 2015

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

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

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery获取对象简单实现方法小结
Oct 30 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
Angular2库初探
Mar 01 Javascript
详解Vue方法与事件
Mar 09 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
js检测判断日期大于多少天的方法
May 04 #Javascript
jQuery实现表格展开与折叠的方法
May 04 #Javascript
JS数字抽奖游戏实现方法
May 04 #Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 #Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 #Javascript
js实现每日自动换一张图片的方法
May 04 #Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 #Javascript
EventBus(1) Spring-Retry(1) 忘记密码(1) TcpServer(1) Spring Boot(5) B+树(2) muduo(1) pt-archiver(1) Fragment(1) ICF-5900W(2)
You might like
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
Vue渲染函数详解
2017/09/15 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[03:44]2014DOTA2国际邀请赛 71专访：DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
pandas如何处理缺失值
2019/07/31 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
postman和python mock测试过程图解
2020/02/22 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
意大利奢侈品牌在线精品店：Jole.it
2020/11/23 全球购物
平面设计自荐信
2013/10/07 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
迟到检讨书300字
2014/02/14 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
离婚案件被告代理词
2015/05/23 职场文书
房贷收入证明范本
2015/06/12 职场文书
工作年限证明模板
2015/06/15 职场文书