ホームページ > ウェブフロントエンド > jsチュートリアル > Mouse_JavaScript スキルの位置に応じてレイヤーの位置を動的に制御します

Mouse_JavaScript スキルの位置に応じてレイヤーの位置を動的に制御します

WBOY
リリース: 2016-05-16 18:41:18
オリジナル
1156 人が閲覧しました
コードをコピーします コードは次のとおりです。


varindex=0; //mouse 初めてクリックすると表示されますが、再度マウスをクリックするとレイヤーは表示されなくなります
/**
* マウスクリックイベント
*bizData: 渡されたパラメーター
*/
function search(bizData)
{
if(index==0)
{
if(bizData==null) //パラメータが空の場合、このレイヤーのコンテンツはクリアされ、null は表示されません
{
$("bizDiv").innerText = "";
$("bizDiv").style.background='#99FFFF';
document.onclick = マウス移動
}else
{
$("bizDiv"). innerText = bizData;
$("bizDiv").style.background='#99FFFF'; //相対ページカラー設定
。 onclick = MouseMove; //クリックトリガーイベント
}
}else{ //2回目のマウスクリック
$("bizDiv").innerText = ""; = MouseMove;
$("bizDiv") .style.background='transparent'; //レイヤーの背景色を「透明色」に設定します
index=0;
/*
*マウス移動イベント、レイヤーの上部と右側の位置を取得します。
*/
関数 MouseMove(ev)
{
ev= ev || ウィンドウ。イベント;
varmousePos(ev);
$("bizDiv").style.right = document.body.clientWidth-mousePos.x 15; top = document.body.clientHeight-200;
$( "bizDiv").style.width='200';
//$("bizDiv").style.hight='200'; >}
/*
* マウスの位置を取得します
*/
function MouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX document.body.scrollLeft - document.body.clientLeft,
y :ev.clientY document.body.scrollTop - document.body.clientTop
}
}


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