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
-
-
繰り返し背景を全面表示してアニメーションする
前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して
-
-
WordPress で VR させて、360°のパノラマ画像を表示する
WordPress.com内ショートコードで VR させる WordPress.com内で、VR（
-
-
CSS 三角で吹き出しを作る
吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお
-
-
CSS 三角 を利用したメニューを作る（レスポンシブ）
前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。 なるべくレスポンシブ対
-
-
WordPress カレンダー カスタマイズ（add_filter版）
前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで
-
-
Web フォント とは？
WEBフォントとは？ 意図するフォントを表示する技術 Webブラウザは端末にインストールされ
-
-
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる
Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c
-
-
Javascript ノードの取得や挿入
ノードの取得 ノードの取得（ダイレクトアクセス） document.getElementById
-
-
【CSS セレクタ】その1：アスタリスクや属性セレクタとか
CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま
