本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
