Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

公開日: : CSS, javascript

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。
分かりやすいように、ボールを投げる感じをやっていきます。

CSSで円を作る

CSSで円を作るには、角丸 border-radius を使います。
幅と高さの半分サイズを角丸に指定すると円になります。

.maru {
  width: 100px;height: 100px;
  border-radius: 50px;  
}

半分なので 50% と指定しても大丈夫です。

.maru {border-radius: 50%;}

マウスダウン、マウスアップ、マウスムーブ

ドラッグに使うマウス操作は以下の3つになります。

  • mousedown:マウスボタンが押されたとき
  • mouseup:マウスボタンが離されたとき
  • mousemove:マウスポインタが要素上を移動したとき

マウスの座標は event.clientX と event.clientY で取得出来ます。

<html>
<head>
<meta charset="utf-8">
<title>マウスドラッグのテスト1</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>マウスドラッグのテスト1</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() を入れることによってこの挙動が起きなくなりました。

DEMO を見る

スマホ用の切り分け判定

スマホ用に 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'){//スマホだったら
........			
}

DEMO を見る

javascript タイマー関数を使ってボールを左右にスライドさせる

javascript タイマー関数は2種類あります。

setInterval(関数名, 時間, 引数1, 引数2,…)

一定時間ごとに特定の処理を繰り返す

setTimeout(関数名, 時間, 引数1, 引数2,…)

一定時間後に特定の処理を1度だけおこなう

ボールはだんだんゆっくりとなっていきたいので、setTimeout を再帰して繰り返そうと思います。

setTimeout 効かない

setTimeout の再帰呼び出しは以下のように書いてループさせます。

function Fnkloop(){
setTimeout(Fnkloop,1000);//1秒ごとに処理を繰り返す
}
Fnkloop();

はじめ間違えて以下のように書いてました。

function Fnkloop(){
setTimeout(Fnkloop(),1000);// ← 間違っています!!
}
Fnkloop();

これだと動かないので気を付けてください。
DEMO を見る
setTimeout で左右にタイマーを使って、投げれるようになりました。

ボールを投げる 左右上下と勢い

最後に上下を付けてマウスドラッグが多いほど早くスライドするようにしました。
DEMO を見る

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応サンプル

このマウスドラッグのスクリプトを利用して、まとめに写真ギャラリーのサンプルを作ってみました。
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
写真ギャラリーサンプルのダウンロードはこちら
DEMO を見る

関連記事

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

CSS三角を利用したメニューを作る(レスポンシブ)

CSS 三角 を利用したメニューを作る(レスポンシブ)

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。 なるべくレスポンシブ対

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

繰り返し背景を全面表示してアニメーションする

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

CSS javascript

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

→もっと見る

    • 201906
      Mon Tue Wed Thu Fri Sat Sun
      12
      3456789
      10111213141516
      17181920212223
      24252627282930
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑