• ローカル検索 SEO対策
    ローカルSEOの内部対策!商圏エリアで検索上位を獲得する方法
    2019年05月16日
  • ブログ
    5分でブログサイト完成!ワードプレスで簡単ブログサイト作成術
    2019年03月28日
  • Webデザイン ホームページ制作
    ホームページ制作はスマホファーストの時代!デバイスの多様化に対応
    2019年02月26日
  • 歯医者さんのブログ記事 ブログ集客
    見ているだけ参考になる歯科のブログ3選!歯科のホームページ制作
    2019年03月12日
  • ユーザー属性 SEO対策
    SEOでアクセス数アップを目指すには、10のユーザー種別の理解がポイント
    2019年05月16日
  • seo対策リンク SEO対策
    SEO対策で重要な被リンク元の調べ方 | 初心者向けのSEO対策ノウハウ
    2019年05月16日
  • 被リンク対策 SEO対策
    SEO対策で重要な被リンク元の増やし方 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • 採用サイト ホームページ制作
    奈良の求人サイト制作会社が教えるIndeed活用ノウハウ!ダイレクト・リクルーティング
    2019年03月14日
  • 被リンクの量と質 SEO対策
    SEO対策で重要な被リンク元の数と質 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • SEO対策 SEO対策
    SEO初心者向けのSEO実践ノウハウ!7個のポイントをご紹介
    2019年05月16日
フローティングウィンドウを実装!jQuery初心者向け サンプルコード付き

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はレイアウトを崩さず追加情報を表示できる、
フローティングウィンドウを実装していきます。

フローティングウィンドウを実装

フローティングウィンドウ

フローティングウィンドウは、
WEBページに重ねて表示し、ドラッグ&ドロップ操作で移動できる子ウィンドウのことです。

今回は「フローティングウィンドウを表示」のリンクをクリックすると開くフローティングウィンドウを作成します。

実際にウィンドウ内に表示する内容はdl/dt/dd要素を使い、
dt要素にフローティングウィンドウのハンドラー(ドラッグ&ドロップ時に選択するパーツ、タイトルバーに相当)を、
dd要素にテキストなどのコンテンツを記述します。

フローティングウィンドウはdisplay:noneで非表示状態にし、
position:absoluteとtopプロパティとleftプロパティで初期表示位置を設定します。

マウスカーソルの形状を変更するcursorプロパティにmoveを設定し、
移動可能なことが分かるようにしておくとより親切です。

はじめに、フローティングウィンドウの表示処理を設定しています。

class属性がopenのa要素がクリックされると、
フローティングウィンドウをfadeIn()でアニメーション付きで表示します。

a要素に対してclickイベントを設定する場合は、
return false;を忘れずに記述してください。

同様に、#floatWindowの閉じるボタンには、フローティングウィンドウをfadeOut()で非表示にする処理を記述します。

次に、ハンドラー(#floatWindow dt)に対して、
mousedownイベントとmouseupイベントを設定します。

ハンドラー上でマウスボタンが押されたら、
フローティングウィンドウの位置をマウスカーソルの位置に変更する処理(ドラッグ処理)を追加し、
マウスボタンが離されたらドラッグ処理を削除するように設定します。

ドラッグ処理では、フローティングウィンドウ上のどの位置でマウスボタンが押されたかを計算します。

mousedown(function(e){…})内では、
body要素からマウスカーソルまでの距離がe.pageXとe.pageYに格納されます。

また、セレクターで指定した要素の表示位置を、
$(セレクター).offset().topと$(セレクター).offset().leftで取得できます。

これらの命令を組み合わせて、
現在のフローティングウィンドウの座標からマウスカーソルの座標を引けば、
フローティングウィンドウ上のマウスの座標を求められます。

計算したフローティングウィンドウ上のマウス座標はdata()を使って、
一時的に保存しておきます。

data(名前,値)は、データをHTMLの要素に関連づけて一時的に保存しておく命令です。

続いて、documentに対してmousemoveイベントを設定します。
documentにmousemoveイベントを設定すると、
webページ上でマウスカーソルが動くたびに指定した命令が実行されます。

マウスの動きが発生するたびに、
css()で#floatWindowのtopプロパティとleftプロパティを設定する処理を記述します。

#floatWindowのtopプロパティとleftプロパティには、
e.pageYとe.pageXで取得した現在のマウスの座標から、data()で保存したclickPointY、clickPointXを引いた値を設定します。

data()で保存したデータは、
data(名前)で取り出せます。

すると、マウスカーソルが移動した距離に応じてフローティングウィンドウの位置も変更されます。

ただし、このままだとマウスのボタンを離してもドラッグ処理が継続してしまうので、
mouseupイベントを設定し、ボタンが離れるとドラッグ処理を取り消すようにしておきます。

>>デモをチェックする

関連キーワード
  • jQuery
    jQueryを使ってCSSのスタイルを変更(アニメーション)!jQueryの基礎 -初級編-
  • バリデーション
    バリデーション付き問い合わせフォーム!jQuery初心者向け サンプルコード付き
  • フローティングウィンドウ
    フローティングウィンドウを実装!jQuery初心者向け サンプルコード付き
  • モーダルウィンドウ
    jQueryでモーダルウィンドウを自作!コピペで使えるコード付き
  • ドロップダウンメニュー
    多階層ドロップダウンメニュー(グローバルメニュー)を自作!サンプルコード付き
  • 正規表現
    文字列の置換に便利な正規表現 - JavaScript
ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事