ホームページ >ウェブフロントエンド >jsチュートリアル >jquery は div ドラッグ幅のサンプル code_jquery を実装します

jquery は div ドラッグ幅のサンプル code_jquery を実装します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル: 2016-05-16 17:27:391016ブラウズ

この例は非常に単純な div ドラッグです。必要な友人は、必要に応じて対応するコードを追加できます。ようこそ

コードをコピーコードは次のとおりです:

div 幅のサイズ変更タイトル> ; <br><!--jqueryを引用--> <br>type= " text/javascript"> <br><script type="text/javascript"> <BR>function bindingResize(el) <BR>{ <BR>//初期化パラメータ<BR>var els = document.getElementById('menu').style; <BR>//マウスの X 軸と Y 軸の座標<BR>x = 0; <BR>//邪悪な人差し指<BR>$(el).mousedown (function (e) <BR>{ <BR>//要素を押した後、現在のマウスとオブジェクトの計算された座標を計算します。<BR>x = e.clientX - el.offsetWidth - $("#menu")。 width() ; <BR>//setCapture<BR>el.setCapture をサポートしながら何かを行いますか? ( <BR>//フォーカスをキャプチャします<BR>el.setCapture()、<BR>//イベントを設定します<BR>el. onmousemove = function (ev) <BR>{ <BR>mouseMove(ev || イベント); <BR>}, <BR>el.onmouseup = MouseUp <BR>) : ( <BR>//イベントをバインド <BR> $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) <BR>); <BR>//デフォルトのイベントが発生しないようにします<BR>e.preventDefault() <BR>} ) ; <BR>//イベントを移動<BR>function MouseMove(e) <BR>{ <BR>//ユニバース超無敵操作... <BR>els.width = e.clientX - x 'px'; 🎜>} <BR>//イベント<BR>関数を停止しますmouseUp() <BR>{ <BR>//releaseCapture<BR>el.releaseCapture をサポートするために何かをします ( <BR>//フォーカスを解放します<BR>el? .releaseCapture(), <BR>//イベントを削除<BR>el.onmousemove = el.onmouseup = null <BR>) : ( <BR>//イベントをアンインストール<BR>$(document).unbind( "mousemove" 、mouseMove).unbind("mouseup"、mouseUp) <BR>); <BR>} <BR>} <BR>var divResize=function(){ <BR>var totalHeight=$("html") .height( ); <BR>console.log(totalHeight); <BR>var topHeight=$("#top").height() <BR>$("#menu").height(totalHeight-topHeight); $("#rightbar").height(totalHeight-topHeight); <BR>} <BR>$(function() { <BR>divResize(); <BR>$(window).resize(divResize) ; <BR><BR>bindResize(document.getElementById('rightbar')); <br></script> <br><style type="text/css"> { <BR>幅: 200px; <BR>背景: #f1f1f1; <BR>境界線の色: #CCCCCC; <BR>境界線の幅: : 0 1px; <BR>} <BR></style> <br>
 -- 

 >
 ;/table> 

div
 🎜>style="width: 2px; 背景: #cccccc; カーソル: e-resize; float: left;">

 ; 

  style="width: 2px; 背景: #cccccc; カーソル: e-resize;">

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript_javascript スキルで PHP コードを直接記述する方法次の記事：javascript_javascript スキルで PHP コードを直接記述する方法

続きを見る

jquery は div ドラッグ幅のサンプル code_jquery を実装します

関連記事