Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
公開日：
:
CSS, javascript
Javascript でマウスドラッグのテストをしていきます。
分かりやすいように、ボールを投げる感じをやっていきます。
CSSで円を作る
CSSで円を作るには、角丸 border-radius を使います。
幅と高さの半分サイズを角丸に指定すると円になります。
.maru {
width: 100px;height: 100px;
border-radius: 50px;
}
半分なので 50% と指定しても大丈夫です。
.maru {border-radius: 50%;}
マウスダウン、マウスアップ、マウスムーブ
ドラッグに使うマウス操作は以下の３つになります。
- mousedown：マウスボタンが押されたとき
- mouseup：マウスボタンが離されたとき
- mousemove：マウスポインタが要素上を移動したとき
マウスの座標は event.clientX と event.clientY で取得出来ます。
<html>
<head>
<meta charset="utf-8">
<title>マウスドラッグのテスト１</title>
<style>
.mmobj{
position:absolute;
border-radius: 50%;
background:#333;
}
</style>
<script>
window.onload = function(){
var mm_flg = false;
var mm_start_x = 0;
var mm_start_y = 0;
// オブジェクトの値指定
var mmobj_x = 100;var mmobj_y = 100;//座標
var mmobj_w = 200;var mmobj_h = 200;//幅と高さ
document.getElementsByClassName('mmobj')[0].style.left = mmobj_x + 'px';
document.getElementsByClassName('mmobj')[0].style.top = mmobj_y + 'px';
document.getElementsByClassName('mmobj')[0].style.width = mmobj_w + 'px';
document.getElementsByClassName('mmobj')[0].style.height = mmobj_h + 'px';
// マウスダウン
window.onmousedown = function(e) {
mm_flg = true;
mm_start_x = e.clientX - mmobj_x;
mm_start_y = e.clientY - mmobj_y;
}
// マウスアップ
window.onmouseup = function(e) {
mm_flg = false;
}
// マウスムーブ
window.onmousemove = function(e) {
if(mm_flg) {
mmobj_x = e.clientX - mm_start_x;
mmobj_y = e.clientY - mm_start_y;
document.getElementsByClassName('mmobj')[0].style.left = mmobj_x + 'px';
document.getElementsByClassName('mmobj')[0].style.top = mmobj_y + 'px';
}
}
};
</script>
</head>
<body>
<h1>マウスドラッグのテスト１</h1>
<div class="mmobj"></div>
</body>
</html>
このような感じになりました。
DEMO を見る
イベントターゲットを指定してボールを掴む
現在 window 全体にイベントがかかってしまっているので、ボールだけにするのに、マウスダウンのところを以下のように変更します。
// マウスダウンイベントを設定
document.getElementsByClassName('mmobj')[0].addEventListener( 'mousedown', function(e) {
// 要素のイベントをリセットしておく
e.preventDefault();
document.getElementsByClassName('mmobj')[0].style.background = '#999';
mm_flg = true;
mm_start_x = e.clientX - mmobj_x;
mm_start_y = e.clientY - mmobj_y;
} );
EventTarget.addEventListener
addEventListener を使ってイベントターゲットそ指定します。
これで、ドラッグがボールをマウスダウンした時だけになります。
document.getElementsByClassName
以前は、getElementById をよく使っていましたが、ページ上で一つしか使えないので後々困ることが多いので、getElementsByClassName にしておきました。
クラスは配列で取得するので、要素位置の数を指定しないとエラーになります。
preventDefault()
マウスアップでドラッグのフラグをfalseしていますが、ダブルクリックなどでドラッグが続いてしまう場合があります。
preventDefault() を入れると、その要素のイベントをキャンセル出来ます。
マウスダウンイベントの中で、e.preventDefault() を入れることによってこの挙動が起きなくなりました。
スマホ用の切り分け判定
スマホ用に touch イベントを付けます。
以前「スマホだったら」と書くのに、マウスイベント内でこんな感じで、
if(event.touches) { //スマホだったら
.......
}
と、簡単に書いてしまっていました。
これだとタッチが出来るパソコンの場合にマウス操作が動かなくなってしまいますので、以下のようにちゃんとユーザーエージェントで振り分けしないとダメでした。
//スマホの振り分け
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0){
ua = 'iphone';
}else if(ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
ua = 'sp';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
ua = 'tab';
}else{
ua = 'other';
}
//イベントの振り分け
var EVENT = {};
if(ua!='other'){//スマホだったら
EVENT.TOUCH_START = 'touchstart';
EVENT.TOUCH_MOVE = 'touchmove';
EVENT.TOUCH_END = 'touchend';
} else {
EVENT.TOUCH_START = 'mousedown';
EVENT.TOUCH_MOVE = 'mousemove';
EVENT.TOUCH_END = 'mouseup';
}
スマホだったらというところをこういう風にします。
if(ua!='other'){//スマホだったら
........
}
javascript タイマー関数を使ってボールを左右にスライドさせる
javascript タイマー関数は２種類あります。
setInterval(関数名, 時間, 引数1, 引数2,…)
一定時間ごとに特定の処理を繰り返す
setTimeout(関数名, 時間, 引数1, 引数2,…)
一定時間後に特定の処理を１度だけおこなう
ボールはだんだんゆっくりとなっていきたいので、setTimeout を再帰して繰り返そうと思います。
setTimeout 効かない
setTimeout の再帰呼び出しは以下のように書いてループさせます。
function Fnkloop(){
setTimeout(Fnkloop,1000);//1秒ごとに処理を繰り返す
}
Fnkloop();
はじめ間違えて以下のように書いてました。
function Fnkloop(){
setTimeout(Fnkloop(),1000);// ← 間違っています！！
}
Fnkloop();
これだと動かないので気を付けてください。
DEMO を見る
setTimeout で左右にタイマーを使って、投げれるようになりました。
ボールを投げる 左右上下と勢い
最後に上下を付けてマウスドラッグが多いほど早くスライドするようにしました。
DEMO を見る
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応サンプル
このマウスドラッグのスクリプトを利用して、まとめに写真ギャラリーのサンプルを作ってみました。
写真ギャラリーサンプルのダウンロードはこちら
DEMO を見る
関連記事
-
-
Javascript Strictモード “use strict”;
Strict モード（厳格モード） Strict モードとは、ECMAScript5（2009年1
-
-
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる（スクロールバーも消したい）
ビューポートの単位 vw, vh, vmin, vmax CSS で大きさを指定する時、px や
-
-
Javascript ES5,6 の新機能（letとconst,アロー関数,クラスなど）
ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript
-
-
日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい
Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google
-
-
WordPress カレンダー カスタマイズ（add_filter版）
前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで
-
-
Javascript タイピング ゲーム スマホ用 をつくる
JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや
-
-
WordPress カレンダー カスタマイズ
WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関
-
-
WordPress エラー：Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で（ビジュアルタブの
-
-
Javascript ノードの取得や挿入
ノードの取得 ノードの取得（ダイレクトアクセス） document.getElementById
-
-
CSS 三角で吹き出しを作る
吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお
