首页
所有分类
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知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
js闭包实现按秒计数
Apr 23 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
Jan 24 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
vue-父子组件和ref实例详解
Nov 10 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
promise(2) redis(3) Kotlin(1) Spring Security(2) Android Gradle(1) XDM(3) AOP(2) 构造函数(1) 验证表达式(1) 动态权限(1)
You might like
PHP＋DBM的同学录程序(3)
2006/10/09 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
php动态绑定变量的用法
2015/06/16 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python实现目录树生成示例
2014/03/28 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
使用Python对Access读写操作
2017/03/30 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python虚拟环境迁移方法
2019/01/03 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
租房协议书样本
2014/08/20 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
干部作风建设工作总结
2014/10/29 职场文书
小学数学国培研修日志
2015/11/13 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers