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

関連記事

Strict モード JavaScript

Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECMAScript5(2009年1

記事を読む

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

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

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

記事を読む

Javascript let const アロー関数 クラス

Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

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

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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 管理画面のテキスト入力欄で(ビジュアルタブの

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

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

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

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

記事を読む

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

→もっと見る

    • 202303
      Mon Tue Wed Thu Fri Sat Sun
      12345
      6789101112
      13141516171819
      20212223242526
      2728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑