首页
所有分类
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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue+element实现打印页面功能
May 20 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 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
事迹材料(636) 介绍信(57) 邀请函(127) 方案(1080) 教学反思(909) 表扬信(62) 检讨书(456) 辞职信(98) 广播稿(323) 感言(394)
You might like
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python3 处理JSON的实例详解
2017/10/29 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
房地产开发计划书
2014/01/10 职场文书
万年牢教学反思
2014/02/15 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
班主任新年寄语
2014/04/04 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
学雷锋倡议书
2015/01/19 职场文书
现场施工员岗位职责
2015/04/11 职场文书
新闻稿标题
2015/07/18 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题