ホームページ > ウェブフロントエンド > jsチュートリアル > 座標_JavaScript スキルを取得するためのレイヤーの位置決めと移動のための JavaScript および Div 実装コード

座標_JavaScript スキルを取得するためのレイヤーの位置決めと移動のための JavaScript および Div 実装コード

WBOY
リリース: 2016-05-16 18:20:05
オリジナル
954 人が閲覧しました
1: レイヤーを移動して、絶対位置を指定するポイントの x 軸と y 軸の座標を取得します (注: 垂直プルダウン ボックスは x 軸と y 軸の座標値に影響します)
コードをコピー コードは次のとおりです。

var x,y,z,down= false,obj
function init(){
obj=event.srcElement //イベント トリガー オブジェクト
obj.setCapture() //現在のオブジェクトに属するマウス キャプチャを設定します
z=obj。 style.zIndex //オブジェクトの Z 軸座標値を取得します
/ /現在のレイヤーが最前面に表示されるように、オブジェクトの Z 軸座標値を 100 に設定します
obj.style。 zIndex=100
x=event.offsetX //イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の X 座標を取得します。 座標
y=event.offsetY //マウス ポインターの相対位置の Y 座標を取得します。イベントをトリガーしたオブジェクトへ
down=true //ブール値、マウスが押されたかどうかを判断します。true は押されたことを意味し、false は押されていないことを意味します。 Press
}
function moveit(){
/ /マウスが押され、同じオブジェクトでonmouseoverイベントとonmousedownイベントが発生したと判断
if(down&&event.srcElement==obj){
with(obj.style){
/*Xを設定ドキュメントの X 軸方向のスクロール距離に、ドキュメント オブジェクトの X 座標値からマウスを押したときの相対ポインタ位置を引いた現在のマウス ポインタを加えたオブジェクトの座標値。イベントをトリガーしたオブジェクト*/
// posLeft=event.x-x;
posLeft=document.body.scrollLeftevent.x-x;
/*オブジェクトの Y 座標値を Y に設定します軸方向のスクロール距離に現在のマウス ポインターを加えた値は、ドキュメント オブジェクトの Y 座標値から、マウスが押されたときにイベントをトリガーしたオブジェクトを基準としたポインター位置の Y 座標を引いた値に相当します */
/ / posTop=event.y-y;
posTop=document.body.scrollTopevent.y-y;
window.status="posLeft=" posLeft ",posTop=" posTop; "clientX="event.clientX"clientY="event.clientY"scrollLeft="document.body.scrollLeft"scrollTop="document.body.scrollTop",event.y="event.y",event.x" イベント。 x;
}
}
}
function stopdrag(){
//onmouseup イベントがトリガーされると、マウスが放されたことを意味するため、down 変数の値を次のように設定します。 false
down=false
obj.style.zIndex= z //オブジェクトの Z 軸座標値を復元します
obj.releaseCapture() //現在のオブジェクトのマウス キャプチャを解除します
//alert("X:" obj.style.left ";Y:" obj.style .top);



2:レイヤーは異なる解像度のブラウザーでも同じ効果を表示します。レイヤーの位置を設定する必要があります

ステップ 1: 最外層の相対的な位置





ステップ 2: 相対位置決めを実行します (解像度の変化に応じてレイヤーが変形しないようにします) )


ALT="" />< /div>
省略

省略
省略
;省略
省略
>省略

省略



//============= = (レイヤー移動メソッド呼び出し) = ============================



コードをコピー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート