jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法
更新時(shí)間：2015年05月04日 15:33:54 投稿：shichen2014
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法,涉及jQuery操作鼠標(biāo)事件及div層的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)仿Google首頁拖動(dòng)效果的方法。分享給大家供大家參考。具體如下：
這里用jQuery.js庫寫了一個(gè)仿Google首頁拖動(dòng)的特效代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>用JQUERY實(shí)現(xiàn)的仿Google首頁拖動(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ì)有所幫助。
您可能感興趣的文章:
- jQuery之排序組件的深入解析
- 基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
- jquery對(duì)元素拖動(dòng)排序示例
- jquery sortable的拖動(dòng)方法示例詳解
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jquery 表格排序、實(shí)時(shí)搜索表格內(nèi)容(附圖)
- jquery列表拖動(dòng)排列(由項(xiàng)目提取相當(dāng)好用)
- jQuery實(shí)現(xiàn)拖動(dòng)調(diào)整表格單元格大小的代碼實(shí)例
- jqueryUI里拖拽排序示例分析
- jquery實(shí)現(xiàn)表格本地排序的方法
- jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫過濾和排序
- jquery實(shí)現(xiàn)仿JqueryUi可拖動(dòng)的DIV實(shí)例
- JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢、排序和分頁功能
- jQuery拖動(dòng)布局其結(jié)果保存到數(shù)據(jù)庫
相關(guān)文章
作為輕量級(jí)的JS庫，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個(gè)有用的jquery小技巧，需要的朋友可以參考下2015-10-10
DIV外區(qū)域Click后關(guān)閉DIV的實(shí)現(xiàn)代碼
首先看下JS的事件模型，JS事件模型為向上冒泡，如onclick事件在某一DOM元素被觸發(fā)后，事件將跟隨節(jié)點(diǎn)向上傳播，直到有click事件綁定在某一父節(jié)點(diǎn)上，如果沒有將直至文檔的根2011-12-12
基于Jquery的動(dòng)態(tài)添加控件并取值的實(shí)現(xiàn)代碼
基于Jquery的動(dòng)態(tài)添加控件并取值的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-09-09
這個(gè)插件主要用于解決IE5.5與IE6.0下面的png圖片無法透明的解決方法，如果您的網(wǎng)站使用了png圖片而且訪客很大一部分是IE7之前的版本，可以使用這個(gè)。2010-08-08
jQuery中;function($,undefined) 前面的分號(hào)的用處
這篇文章主要介紹了jQuery中;function($,undefined) 前面的分號(hào)的用處,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了如何使用jquery獲取復(fù)選框被選中的值,需要的朋友可以參考下2014-04-04
jQuery移除元素自動(dòng)解綁事件實(shí)現(xiàn)思路及代碼
用jQuery將元素移除的基本方法常用的有三個(gè)，一個(gè)是remove()方法，一個(gè)是html()方法，一個(gè)是empty()方法2014-05-05
jQuery treeview樹形結(jié)構(gòu)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery treeview樹形結(jié)構(gòu)應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
jQuery 在光標(biāo)定位的地方插入文字的插件的實(shí)現(xiàn)代碼，通過獲取光標(biāo)位置，然后插入文字2012-05-05
這篇文章主要介紹了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以參考下2014-04-04