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 を見る

関連記事

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

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

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

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

CSS セレクタ

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

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

記事を読む

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

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

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

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

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

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

ビューポートの単位 vw, vh, vmin, vmax CSS で大きさを指定する時、px や

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

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

記事を読む

Web フォント とは?

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

記事を読む

javascriptで複数同じ名前のformの値を取得する

javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHTMLフォームがあった場合、

記事を読む

画像加工 cropbox.js

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

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

記事を読む

CSS javascript

Message

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

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202403
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑