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 を見る
関連記事
-
-
HTML5 audio タグ を使って音声を出す
HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生
-
-
日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい
Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google
-
-
WordPress エラー：Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で（ビジュアルタブの
-
-
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる
Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c
-
-
Javascript ノードの取得や挿入
ノードの取得 ノードの取得（ダイレクトアクセス） document.getElementById
-
-
CSS 三角で吹き出しを作る
吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお
-
-
画像の拡大縮小を javascript の touch イベントでやってみる
画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。
-
-
繰り返し背景を全面表示してアニメーションする
前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して
-
-
Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR
-
-
【CSS セレクタ】その2：擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか
＜今回のピックアップ項目＞ :link :visited :hover :active :t
