jQuery實現仿Google首頁拖動效果的方法

2024-05-06 16:19:16

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery實現仿Google首頁拖動效果的方法,涉及jQuery操作鼠標事件及div層的相關技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了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>