首页
所有分类
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的淡入淡出的特效基础练习
Dec 13 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 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
Spring(9) tensorflow(2) Xception(1) Inception(2) Lifecycle(1) ResNet50(1) 内存泄露(1) Seaborn(1) PostMapping(1) yolo3(1)
You might like
多文件上载系统完整版
2006/10/09 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
深入浅析php json 格式控制
2015/12/24 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
使用Python进行体育竞技分析（预测球队成绩）
2019/05/16 Python
用python做游戏的细节详解
2019/06/25 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
一套带网友答案的.NET笔试题
2016/12/06 面试题
后勤人员岗位职责
2013/12/17 职场文书
法制宣传实施方案
2014/03/13 职场文书
汇源肾宝广告词
2014/03/20 职场文书
公司年终奖分配方案
2014/06/16 职场文书
教师节活动总结
2014/08/29 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014年领班工作总结
2014/11/25 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书