Googleホームページのドラッグ効果を模倣したjQueryを実装する方法_jquery
この記事の例では、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 プログラミングに役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1665
14
1424
52
1321
25
1269
29
1249
24
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
徹底した分析: jQuery の長所と短所
Feb 27, 2024 pm 05:18 PM
jQuery は、フロントエンド開発で広く使用されている高速、小型、機能豊富な JavaScript ライブラリです。 2006 年のリリース以来、jQuery は多くの開発者にとって最適なツールの 1 つとなっていますが、実際のアプリケーションでは、いくつかの利点と欠点もあります。この記事では、jQuery の長所と短所を詳しく分析し、具体的なコード例で説明します。利点: 1. 簡潔な構文 jQuery の構文設計は簡潔かつ明確であるため、コードの読みやすさと記述効率が大幅に向上します。例えば、
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
jQueryを使用してテーブルに新しい行を追加する方法の紹介
Feb 29, 2024 am 08:12 AM
jQuery は、Web 開発で広く使用されている人気の JavaScript ライブラリです。 Web 開発中は、JavaScript を使用してテーブルに新しい行を動的に追加することが必要になることがよくあります。この記事では、jQuery を使用してテーブルに新しい行を追加する方法を紹介し、具体的なコード例を示します。まず、jQuery ライブラリを HTML ページに導入する必要があります。 jQuery ライブラリは、次のコードを通じてタグに導入できます。
