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

本文实例讲述了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为正在移动的divdiv_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改成absolutediv_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和lefttop:_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程序设计有所帮助。