本文實(shí)例講述了jQuery實(shí)現(xiàn)仿Google首頁(yè)拖動(dòng)效果的方法。分享給大家供大家參考。具體如下：
這里用jQuery.js庫(kù)寫了一個(gè)仿Google首頁(yè)拖動(dòng)的特效代碼
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>用JQUERY實(shí)現(xiàn)的仿Google首頁(yè)拖動(dòng)特效</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; //鼠標(biāo)時(shí)候按下 var x_old=null; //按下鼠標(biāo)時(shí)鼠標(biāo)的坐標(biāo) var y_old=null; var div_move=null; //正在移動(dòng)的div var div_move_width=null; //正在移動(dòng)的div的寬 var div_move_height=null; //正在移動(dòng)的div的高 var xuxian="<div id='xuxian'></div>"; //虛線框 document.oncontextmenu=new Function('event.returnValue=false;'); //禁止右鍵 document.onselectstart=new Function('event.returnValue=false;'); //禁止選中 //當(dāng)鼠標(biāo)按下的時(shí)候 $("p").mousedown(function(e){ mouse_down=true; //鼠標(biāo)按下 div_move=$(this).parent(); //指定當(dāng)前div為正在移動(dòng)的div div_move_width=div_move.width(); div_move_height=div_move.height(); x_old=e.pageX-$(this).offset().left; //獲取鼠標(biāo)坐標(biāo) y_old=e.pageY-$(this).offset().top; //把當(dāng)前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 }); //將虛線框添加到正在移動(dòng)的div之前的位置 div_move.before(xuxian); $("#xuxian").css({ width:'100%', height:div_move_height }); }); //移動(dòng)鼠標(biāo) $(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({ //改變正在移動(dòng)div的top和left top:_y-y_old, left:_x-x_old });/*注意,因?yàn)槭髽?biāo)當(dāng)前始終在正在移動(dòng)的div上面,所以,鼠標(biāo)移動(dòng)不會(huì)觸發(fā)其他元素的mouseenter,mouseleave,mouseover和mouseout事件,要想達(dá)到同樣的效果,只能根據(jù)鼠標(biāo)的坐標(biāo)來判斷鼠標(biāo)是否進(jìn)入其他元素*/ 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(); //判斷鼠標(biāo)坐標(biāo)是否進(jìn)入左邊div_left容器 if(_x>left_left&&_x<(left_left+left_width)){ /*選定左邊div_left容器下的最后一個(gè)可移動(dòng)div, 不包含當(dāng)前正在移動(dòng)的div元素和虛線框*/ var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last"); if(div_left_last.length>=1){ //判斷時(shí)候左邊div_left容器下時(shí)候有可移動(dòng)div元素 if(_y>(div_left_last.offset().top+div_left_last.height())){ //判斷鼠標(biāo)是否在左邊div_left容器最后一個(gè)元素的下邊 $("#xuxian").remove(); //如果是,移除之前添加的虛線框 div_left_last.after(xuxian); //把虛線框添加為左邊div_left容器的最后一個(gè)子元素 $("#xuxian").css({ //設(shè)定虛線框的高和寬 width:'100%', height:div_move_height }); }else{ //如果鼠標(biāo)不在左邊div_left容器最后一個(gè)元素的下邊, //那么,循環(huán)判定鼠標(biāo)是否進(jìn)入左邊div_left容器下的可移動(dòng)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); //把虛線框添加到當(dāng)前鼠標(biāo)進(jìn)入的div元素的前面 $("#xuxian").css({ //設(shè)定虛線框的高和寬 width:'100%', height:div_move_height }); break; //退出循環(huán) } } } }else{//如果左邊div_left容器下面沒有任何可移動(dòng)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)){ //判斷鼠標(biāo)是否進(jìn)入中間div_center容器 /*選定中間div_center容器下的最后一個(gè)可移動(dòng)div, 不包含當(dāng)前正在移動(dòng)的div元素和虛線框*/ var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last"); if(div_center_last.length>=1){ //判斷中間div_center容器的下面時(shí)候有可移動(dòng)div子元素 if(_y>(div_center_last.offset().top+div_center_last.height())){ //判斷鼠標(biāo)是否在中間div_center容器的最后一個(gè)可移動(dòng)div子元素的下邊 $("#xuxian").remove(); //如果是,刪除之前添加的虛線框 div_center_last.after(xuxian); //把虛線框添加為中間div_center容器的最后一個(gè)div子元素 $("#xuxian").css({ //設(shè)定虛線框的寬和高 width:'100%', height:div_move_height }); }else{ //如果鼠標(biāo)不在中間div_center容器最后一個(gè)可移動(dòng)div子元素的下邊, //則循環(huán)判斷鼠標(biāo)進(jìn)入的是哪一個(gè)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(); //找到鼠標(biāo)進(jìn)入的div子元素,刪除之前添加的虛線框 div_center_div.eq(i).before(xuxian); //把虛線框添加到當(dāng)前鼠標(biāo)進(jìn)入的div子元素的前面 $("#xuxian").css({ //設(shè)定虛線框的寬度和高度 width:'100%', height:div_move_height }); break; //退出循環(huán) } } } }else{ //如果中間div_center容器的中間沒有可移動(dòng)的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的最后一個(gè)div元素 $("#xuxian").css({ width:'100%', height:div_move_height }); } } }else if(_x>right_left&&_x<(right_left+right_width)){ //判斷鼠標(biāo)是否進(jìn)入右邊div_right容器 /*選定右邊div_right容器下的最后一個(gè)可移動(dòng)div, 不包含當(dāng)前正在移動(dòng)的div元素和虛線框*/ var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last"); if(div_right_last.length>=1){ //判斷右邊div_right容器下邊是否有可移動(dòng)的div子元素 if(_y>(div_right_last.offset().top+div_right_last.height())){ //判斷鼠標(biāo)時(shí)候在右邊div_right容器最后一個(gè)可移動(dòng)div元素的下邊 $("#xuxian").remove(); //如果是,刪除之前添加的虛線框 div_right_last.after(xuxian); //添加虛線框?yàn)橛疫卍iv_right容器的最后一個(gè)元素 $("#xuxian").css({ //設(shè)定虛線框的寬和高 width:'100%', height:div_move_height }); }else{ //如果鼠標(biāo)不在右邊div_right容器最后一個(gè)可移動(dòng)div元素的下邊, //則循環(huán)判斷鼠標(biāo)進(jìn)入到右邊div_right容器下哪個(gè)可移動(dòng)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(); //找到鼠標(biāo)進(jìn)入的div元素,刪除之前添加的虛線框 div_right_div.eq(i).before(xuxian); //把虛線框添加到鼠標(biāo)進(jìn)入的div元素的前面 $("#xuxian").css({ //設(shè)定寬和高 width:'100%', height:div_move_height }); break; //退出循環(huán) } } } }else{ //如果右邊div_right元素的下邊沒有可移動(dòng)的div子元素 if(div_right_div.length==0){ $("#xuxian").remove(); //刪除之前添加的虛線框 $("#div_right").append(xuxian); //把虛線框添加為右邊div_right容器的子元素 $("#xuxian").css({ //設(shè)定虛線框的寬和高 width:'100%', height:div_move_height }); } } } }).mouseup(function(){ mouse_down=false; //鼠標(biāo)松開 $("#xuxian").before(div_move); //將當(dāng)前正在移動(dòng)的div元素添加到虛線框的前面 div_move.css({ //更改正在移動(dòng)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>活動(dòng)</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>希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
