Webページ作成覚書: javascript

ラベル javascript の投稿を表示しています。すべての投稿を表示

2020-07-18

【javascript】エラー処理

try~catch文で例外処理をする

try{
    //例外が発生する可能性のある処理
}catch(e){
    //例外が発生した場合の処理
}

参考：JavaScriptのtry~catch文で例外処理をする方法

例：正規表現テスト

以上

2020-06-28

javascript：パスワード生成

パスワードを生成するＷｅｂアプリを作りました。

パスワード生成

◆ html

<!DOCTYPE html> 
<html>
<head> 
<meta charset=UTF-8">
<title>パスワード生成</title> 
<link rel=icon href="../../_img/BlueSky_favicon.png" sizes="16x16" type="image/png">
<link rel="stylesheet" type="text/css" href="http://s10-4bn.sunnyday.jp/_css/reset.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
  $(function() {
    let password = "";
    for (let i=0; i<100; i++) {
      password = createPass();
      if(password.match(/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i)){
        // [a-z\d]{8,100} 英字大小関わらずaからz、または、0から9の文字中で8字以上100字以下の連続
        // (?=.*?[a-z])(?=.*?\d) 任意の0回以上の文字列.*?とaからzの1文字[a-z]を条件とした任意の位置の先頭位置(?= )、
        //                       かつ、任意の0回以上の文字列.*?と数字1文字\dを条件とした任意の先頭位置(?= )
        break;
      }
    }

    $("h2").text(password);
    $('#copybtn').on('click', function(){
      // コピーする文章の取得
      let text = $('#pass').text();
      // テキストエリアの作成
      let $textarea = $('<textarea></textarea>');
      // テキストエリアに文章を挿入
      $textarea.text(text);
      //　テキストエリアを挿入
      $(this).append($textarea);
      //　テキストエリアを選択
      $textarea.select();
      // コピー
      document.execCommand('copy');
      // テキストエリアの削除
      $textarea.remove();
      // アラート文の表示
      $('#js-copyalert').show().delay(2000).fadeOut(400);
    });

    function createPass() {
      let password_base = '2346789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRTUVWXYZ';
      let length = 10;
      let password = '';
      for (let i = 0; i < length; i++) {
        password += password_base.charAt(Math.floor(Math.random() * password_base.length));
      }
      console.log(password);
      return password;
    }

  });

</script> 

<style type="text/css">
h1 { 
  margin: 2rem;
  font-size: 2rem;
}
h2 { 
  margin: 1.5rem;
  font-size: 1.5rem;
}
button { 
  margin: 1rem;
}
</style>

</head> 

<body> 
  <div style="text-align: center;">
  <h1>パスワード生成</h1>
  <h2 id="pass">></h2>
  <button type="button" id="copybtn">copy</button>
  <p id="js-copyalert" class="copy_alert" style="display: none;">copied</p>
  </div>
</body> 

</html>

参考：
【jQuery】テキストをクリップボードにコピーする方法【コピペOK】
Javascriptでランダムなパスワードを生成する
パスワード向け正規表現 /^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i を解読する

以上

2013-11-08

javascript：スライドショー（画像ファイルをhtmlに記載する場合）

画像とキャプションを一緒にスライドショーできます。

◆html

1行目：
HTML5であることを宣言
6行目：
jQueryを読み込む。
7行目：
slideshowImgInHtml.js を読み込む。
24-30行目：
スライドショーを構成する部分
24行目：
div要素、id="slideshow" とする。
data-interval="3000"：切り替え間隔を3000msに設定
data-animate-time="500"：切り替え時のアニメーションの時間を500msに設定
25-29行目：
画像ファイルとキャプションを設定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SlideShow</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slideshowImgInHtml.js"></script>

<style>
#slideshow {
 width:800px; 
 margin:0 auto;
 text-align: center; 
}

#slideshow p {
 font: bold 16px arial,sans-serif;
 text-align: center; 
}
</style>
</head>
<body>
 <div id="wrap">
     <div id="slideshow" data-interval="3000" data-animate-time="500">
   <div><img src="http://farm6.static.flickr.com/5052/5503321609_d9e9571af9_z.jpg"/><p>いすみ鉄道</p></div>
   <div><img src="http://farm6.static.flickr.com/5013/5546595586_6f6966e6ca_z.jpg"/><p>いすみ（蛍）</p></div>
   <div><img src="http://farm6.static.flickr.com/5263/5616428686_82610176c3_z.jpg"/><p>飯給</p></div>
   <div><img src="http://farm6.static.flickr.com/5251/5503249326_6b1c255324_z.jpg"/><p>いちはら市民の森</p></div>
   <div><img src="http://farm6.static.flickr.com/5136/5546824600_af97b41fe5_z.jpg"/><p>君ヶ浜から見た犬吠崎灯台</p></div>
  </div>
    </div>
</body>
</html>

◆javascript(slideshowImgInHtml.js)

1-3行目：
ページを読み込んだ時に実行する関数。関数 slideShow を実行する。

6-52行目：関数 slideShow()
スライドショーを実行する。
8-9行目：
スライドショーの切り替え間隔（interval）と切り替え時のアニメーションの時間（animateTime）の
初期値を設定
11-15行目：
html で設定したdata-interval, data-interval の値を interval, animateTime に代入。
data-interval, data-interval がなければ、初期値の値を使う。
17-22行目：
子要素 div のスタイルを設定する。（position: "absolute" を指定しないと、
スライドショーが切り替わるたびに表示位置がずれてしまう。）
24-29行目：
子要素 div の最初の要素を active 、不透明にする（表示する）。
31行目：
一定期間（interval）ごとに関数 slideSwitch()を実行する。

33-50行目：関数 slideShow() のインナー関数 slideSwitch()
active な要素を透明にアニメーションして、次の要素を不透明にアニメーションする。
アニメーション時間は animateTime。
ローカル変数 animateTime を使えるようにインナー関数にしてある。
（なぜか、function slideSwitch() { } では、関数が定義されない。
31行目の setInterval でエラーが発生する。）
35-40行目：
active な要素を $active に代入する。active な要素の次の要素を $next に代入する。
次の要素がなければ（active な要素が最後の要素なら）、最初の要素を $next に代入する。
42-47行目：
$next に代入された要素をアニメーションで不透明にする（表示する）。
active な要素を active でなくす。
48行目：
$active に代入された要素をアニメーションで透明にする（非表示にする）。

$(function() {
 slideShow();
});


function slideShow() {

var interval = 3000;
var animateTime = 1000;

 var $slideshow = $('#slideshow');
 var $interval = $slideshow.data('interval');
 if($interval) interval = Number($interval);
 var $animateTime = $slideshow.data('animate-time');
 if($animateTime) animateTime = Number($animateTime);

 $('#slideshow div').each(function(){
  $(this).css({
    position: "absolute", // ボックスの配置を絶対位置に設定する。
    opacity: 0.0 // div要素の透過度を0.0（透明）に設定する。
   });
 });

 $('#slideshow div:first')
  .addClass('active') // 最初の要素をactiveに設定する。
  .css({
   opacity: 1.0 // div要素の透過度を1.0（不透明）に設定する。
  })
 ;

 setInterval( "slideSwitch()", interval ); // slideSwitch()を時間intervalごと繰り返す。

 slideSwitch = function() {

  var $active = $('#slideshow div.active');
  if ($active.next().length) {
   $next = $active.next(); // activeな要素の次の要素を$nextに定義
  } else {
   $next = $('#slideshow div:first'); // nextがなければ最初の要素を$nextに定義
  }
 
  $next
   .css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, animateTime, function() { // 次の要素の透過度を1.0にアニメーションする。
                         $active.removeClass('active'); // activeな要素からclass='active'を削除
      });
  $active.animate({opacity: 0.0}, animateTime, function() {});  // 今の要素の透過度を0.0にアニメーションする。
 
 }

}

参考にしたページ

スライドショー作り方（A Simple jQuery Slideshow）

以上

2013-10-30

javascript：分を２桁の文字列に変換する

時刻を 14:01, 14:02 のように表示したいとき、
date.getHours() + ':' + date.getMinutes()
では、14:1, 14:2 と表示される。

そこで、Dateオブジェクトに以下のプロトタイプ（メソッド）を追加した。

Date.prototype.getMinutesString = function(){
 var minutes = this.getMinutes();
 if ( minutes < 10 ) {
  minutes = "0" + minutes;
 }
 return minutes;
}

例
var date = new Date("2013-10-13T05:01:57Z");
date.getHours() + ':' + date.getMinutesString()
で、14:01（地方時）と表示される。

応用例（GpxClipper：gpxファイルを加工するウェブアプリ）

関連ページ

Google Maps API：gpxファイルを描画&編集する

参考にしたページ

以上

2013-10-29

javascript：xml要素の削除

$("削除する要素").remove()　で要素を削除する。
以下の例では、"trkpt"要素のうち、条件式を満たす要素を削除する。
jQuery の $().each() で個別処理(ループ)している。

$(xml).find("trkpt").each(function(i){
  if ( 条件式 ) {
   $(this).remove();
  } 
 });

応用例（GpxClipper：gpxファイルを加工するウェブアプリ）

関連ページ

Google Maps API：gpxファイルを描画&編集する

参考にしたページ

以上

javascript：xmlファイルの読み込み

jQuery の $.ajax を使う。
sample.xml：読み込むファイル
13-15行目：ファイルを読み込んだ後に実行するスクリプト

url_gpx = "sample.xml";
   // XMLファイル読み込み開始
   $.ajax({
     url: url_gpx,
     cache:false,
     dataType:"xml",
  error:  function(XMLHttpRequest, textStatus, errorThrown){
    alert('読み込みエラー!');
   },
     success:function(data){
      xml = data;
      :
      :
     }
   });

ファイルが同じドメインにある場合はこの方法が使える。
ローカルのファイルを読み込む場合はこちら〔ﾘﾝｸ〕

応用例
応用例（GpxClipper：gpxファイルを加工するウェブアプリ）

関連するページ
javascript：ファイルの読み込み
Google Maps API：gpxファイルを描画&編集する

以上

2013-10-21

javascript：TIPS

◆リファレンス

◆JSON

[参] http://hakuhin.jp/js/json.html#JSON_00

「JavaScript Object Notation（JavaScriptのオブジェクト表記法）」の略。　

JSON は、null、真偽値、数値、文字列、配列、オブジェクト（連想配列）のデータを、文字列で表現できる。

配列とオブジェクト（連想配列）は、ネスト（入れ子）構造で表現する事ができる。

「JavaScript のオブジェクト」から、「JSON 文字列」に変換するには、JSON.stringify() メソッドを使用する。

var obj = {
  aaa:{
   count :123,
   name  :"テスト１",
   result:false
  },
  bbb:{
   count :456,
   name  :"テスト２",
   result:true
  },
  ccc:{
   count :789,
   name  :"テスト３",
   param :{
    ary :["a","b","c"],
    name:"テスト４"
   },
   result:true
  }
 };

 var json_text = JSON.stringify(obj);

「JSON 文字列」から「JavaScript のオブジェクト」に変換するには、JSON.parse() メソッドを使用する。

var json_text = '{"ary":[0,1,2],"obj":{"a":0,"b":1,"c":2}}';
var obj = JSON.parse(json_text);

◆in演算子

参考：
http://uhyohyo.net/javascript/

格納されている全ての値を順々に処理するため、for..inの構文を用いる。

for (var prop in window) {
        // prop に関する処理
    }

◆クォーテーションマークの入れ子

￥" でエスケープできる。

document.write("<a href='javascript:document.write(￥"あいうえお￥")'>");

◆べき乗

Math.pow(x,y)　　引数: x=基数, y=指数

◆配列の生成

var a = new Array(); または、
var a = [];

◆条件演算子（? :）

exp1 ? exp2 : exp3

exp1 が真であれば exp2 を、さもなくば exp3 を返します。

yy = (xx >= 5) ? "big" : "small"; は

if ( xx >= 5) {

yy = "big";

} else {

yy = "small";

}

と同じです。

場合によっては if を使った方が演算が速い場合があります〔ﾘﾝｸ〕。

以上

2013-10-20

javascript：ファイルの出力

リンクをクリックしてテキストをローカルファイルに出力
（IE10の場合、ローカルでは動作しない。）

サンプル
応用例（GPXファイルを加工するウェブアプリ）

◆html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Blob</title>
<script src="jquery.js"></script>
<script src="Blob.js"></script>
</head>
<body>
<textarea id="content" cols="40" rows="5">Hello, World!
こんにちは、みなさん！</textarea><br>
<a id="download" target="_blank">ダウンロード（IEでは、右クリック＞対象をファイルに保存）</a>
</body>
</html>

◆javascript(Blob.js)

20行目：~~"type"を"application/x-msdownload"に設定することで、テキストでもダウンロードが可能。"text/plain"に設定するとブラウザに表示されてしまう。~~
"type"を設定せずに、var blob = new Blob([ content ]);としてもダウンロードできた（2016-05-31）
25行目："tmp.txt"は保存するときのデフォルトのファイル名。IEでは動作しない。

注意）
contentに日本語が含まれているとUTF-8で、含まれていないとShift-JISで保存される。
Shift-JISで保存されたgpxファイルをテキストエディタで日本語を含むように書き換えた場合、Googleのマイマップで読み込むと文字化けする。

$(function() {

 if (typeof Blob !== "undefined") {
//  alert('このブラウザに対応しています');
 } else {
  alert('このブラウザには対応していません');
 }

 $("#content").keyup(function(){
  setBlobUrl("download", $("#content").val());
 });
    
    $("#content").keyup(); // 上で設定したkeyupイベント(setBlobUrl)を実行する

});

function setBlobUrl(id, content) {
        
 // 指定されたデータを保持するBlobを作成する。
    var blob = new Blob([ content ], { "type" : "application/x-msdownload" });

 // Aタグのhref属性にBlobオブジェクトを設定する。
    window.URL = window.URL || window.webkitURL;
    $("#" + id).attr("href", window.URL.createObjectURL(blob));
    $("#" + id).attr("download", "tmp.txt");

}

◆javascript(jquery.js)

jQueryからダウンロード

参考にしたページ

以上

jQuery：TIPS

参考ページ

ダウンロード： jQuery 1.10.2（非圧縮版）

◆使い方

本家サイト（http://jquery.com/）の「Download」ボタンを押してjQuery本体をダウンロードし、HTMLから呼び出す。

または、Googleのサイトに置いてあるjQueryをURLで指定して使う。

http://ponk.jp/jquery/basic/install

◆要素の生成

var element = $("<p></p>");
↓<p></p>

var element = $("<p class='description'>テキスト</p>");
↓<p class="description">テキスト</p>

var element = $("<p>", {class: "description", text: "テキスト"});
↓<p class="description">テキスト</p>

◆要素の選択

$("#id div") ： #id を先祖にもつすべての div 要素を選択する
$("#id > div") ： #id を親にもつすべての div 子要素を選択する（孫要素は選択されない）

◆要素の追加

.append or .appendTo：子要素を最後に追加

$('#box').append('<div>…</div>') or
$('<div>…</div>').appendTo('#box)
↓
<div id="box">
:
<div>…</div>
</div>

.prepend or .prependTo：子要素を最初に追加

$('#box').prepend('<div>…</div>') or
$('<div>…</div>').prependTo('#box')
↓
<div id="box">
<div>…</div>
:
</div>

.after or .insertAfter：後ろに追加

$('#box').after('<div>…</div>') or
$('<div>…</div>').insertAfter('#box')
↓
<div id="box"></div>
<div>…</div>

.before or .insertBefore：前に追加

$('#box').before('<div>…</div>') or
$('<div>…</div>').insertBefore('#box')
↓
<div>…</div>
<div id="box"></div>

◆要素の削除

.remove
$('#box').remove();
↓
<div id="box">・・・</div> を削除

◆テキストの設定

.text

$('<name>').text("テキスト")

↓

◆属性の設定

.attr

$('<img>').attr("src", "http://・・・.jpg")

↓

◆全ての要素に対して関数を実行する

.each $.each

$('#slideshow div').each(function(){
$(this).css({opacity: 0.0});
});
↓
<div id="slideshow">
<div style="opacity:0.0;>…</div>
<div style="opacity:0.0;>…</div>
:
</div>

Reference:
[1] jQueryのeachと$.eachの簡単な使い方のメモ

◆jQuery を高速に使う CSS セレクタの書き方

何度も同じセレクタを実行しない（変数にキャッシュしておく、メソッドチェーンを使う）
クラスだけを指定するのは禁止
#id を積極的に使う
途中までの結果を再利用する（変数にキャッシュしておく、メソッドチェーンを使う）
子供セレクタ(>)を使うと速くなることがある

参考　jQuery を高速に使う CSS セレクタの書き方

◆jQueryでimgタグのsrc情報を取得する方法。

例えばHTMLコードが
<img src="test.jpg" id="test" />
という時、
src = $("#test").attr('src');
で取得可能。

◆jQuery で自分自身のHTMLを取得する方法

References
[1] jQuery で自分自身のHTMLを取得する
[2] jQueryオブジェクトとDOM要素の互換性

var htmlText = $jQueryObject[0].outerHTML;

◆classの追加、削除、取得

追加：　.addClass("class名")
削除：　.removeClass("class名")
取得：　.hasClass("class名")

例：

        $("#play-button").on("click", function(){
            if ( $(this).hasClass("active") ){
                $(this).removeClass("active");
                 console.log("play-button is idle");
            } else {
                $(this).addClass("active");
                console.log("play-button is active");
            }
        });

以上

javascript：ファイルの読み込み（ドラッグ＆ドロップ）

ドラッグ＆ドロップでファイルを読み込む（複数ファイルの選択可能）

画像ファイルの場合、追加して表示します。

サンプル

◆html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File API Sample (onDrop)</title>
<script src="onDrop.js"></script>
<style>
html,body {
 margin:  0px;
 padding: 0px;
 height:  100%;
}
#drop img {
 height: 75px;
 border: 1px solid #000;
 margin: 10px 5px 0 0;
 float: left;
}
</style>
</head>
<body>
<div>下にファイルをドロップしてください。ファイルを表示します。</div>
<div id="drop" style="width:95%; height:90%;" ondragover="onDragOver(event)">
</div>
</body>
</html>

◆javascript(FileInput.js)

25-31行目：ファイルが画像の場合の処理（height=75pxの大きさで画像を表示）
34-39行目：ファイルが画像以外の場合の処理（テキストを表示）

window.onload = function() {
 if (window.File) {
     // File APIに関する処理を記述
//      window.alert("File APIが実装されてます。");
  document.getElementById("drop").addEventListener("drop", onDrop, false);
 } else {
     window.alert("本ブラウザではFile APIが使えません");
    }
}

// Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
function onDrop(event){
 var files = event.dataTransfer.files;
 var drop = document.getElementById("drop");
 // ファイルの配列から1つずつファイルを選択
 for(var i=0; i< files.length; i++){
  var f = files[i];
  // FileReaderオブジェクトの生成
  var reader = new FileReader();
  // エラー発生時の処理
  reader.onerror = function (evt) {
   drop.innerHTML = "読み取り時にエラーが発生しました。";
  }
  if (f.type.match('image.*')) {
         reader.onload = function (evt) {
           var img = document.createElement('img');
           img.src = evt.target.result;
           document.getElementById("drop").appendChild(img);
         }
         // readAsDataURLメソッドでファイルの内容を取得
         reader.readAsDataURL(f);
  } else {
   // ファイル読取が完了した際に呼ばれる処理
   reader.onload = function (evt) {
    var content = reader.result.replace(/</g,'<')
    drop.innerHTML = content;
   }
   // readAsTextメソッドでファイルの内容を取得
   reader.readAsText(f);
  }
     }
     // ブラウザ上でファイルを展開する挙動を抑止
     event.preventDefault();
}

function onDragOver(event){ 
 // ブラウザ上でファイルを展開する挙動を抑止
 event.preventDefault(); 
}

参考にしたページ

JavaScriptでファイル操作！？ File APIを使いこなそう

JavaScript で File API を使用してファイルを読み取る

以上

javascript：ファイルの読み込み

ボタンをクリックしてでファイルを読み込む

サンプル
応用例（GPXファイルを加工するウェブアプリ）

◆html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File API (Input)</title>
<script src="FileInput.js"></src>
<style>
#disp img {
 height: 75px;
 border: 1px solid #000;
 margin: 10px 5px 0 0;
 float: left;
}
</style>
</head>
<body>
<input type="file" id="files" multiple />
<div id="disp" ></div>
</body>
</html>

◆javascript(FileInput.js)

22-28行目：ファイルが画像の場合の処理（height=75pxの大きさで画像を表示）
31-36行目：ファイルが画像以外の場合の処理（テキストを表示）

window.onload = function() {
 if (window.File) {
     // File APIに関する処理を記述
//      window.alert("File APIが実装されてます。");
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
 } else {
     window.alert("本ブラウザではFile APIが使えません");
    }
}

function handleFileSelect(event) {
 var files = event.target.files; // FileList object
    for(var i=0; i< files.length; i++) {
  var f = files[i];
  // FileReaderオブジェクトの生成
  var reader = new FileReader();
  // エラー発生時の処理
  reader.onerror = function (evt) {
   disp.innerHTML = "読み取り時にエラーが発生しました。";
  }
  if (f.type.match('image.*')) {
         reader.onload = function (evt) {
           var img = document.createElement('img');
           img.src = evt.target.result;
           disp.appendChild(img);
         }
         // readAsDataURLメソッドでファイルの内容を取得
         reader.readAsDataURL(f);
  } else {
   // ファイル読取が完了した際に呼ばれる処理
   reader.onload = function (evt) {
    var content = reader.result.replace(/</g,'<')
    disp.innerHTML = content;
   }
   // readAsTextメソッドでファイルの内容を取得
   reader.readAsText(f, 'utf-8');
  }
    }

}

参考にしたページ

JavaScriptでファイル操作！？ File APIを使いこなそう

JavaScript で File API を使用してファイルを読み取る

以上

2013-10-03

javascript：パノラマ写真をドラッグでスクロール

サンプル

◆html

16行目：width, height で画像を表示するサイズを定義する。
17行目：width, height で画像のサイズを定義する。urlで画像ファイルを定義する。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Panorama</title>
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="panorama.css">
<script src="panorama.js"></script>
</head>

<body>

<div align="center">

<h1>九十九谷</h1>

<div id="panorama_wrapper" style="width:1000px; height:400px;">
 <div id="panorama_image" style="width:2261px; height:400px; background-image: url('001.jpg')"></div>
</div>

</div>

</body>
</html>

◆javascript(panorama.js)

尚、360°パノラマ写真を連続してドラッグできるようにするには、20行目の代わりに21行目を使用し、46,47行目を使用する。

var dx = 0; // マウスダウンした場所の画像の座標
var xcache = 0; // 画像の左端のスクリーンの左端に対する座標
var dragObj; // ドラッグの状態を表す。　null→ドラッグしていない状況
var maxLeft; // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
var panorama_width; //画像の幅

window.onload = function () {
 setPicture();
}

function setPicture(){

 dragObj = null;

 document.getElementById('panorama_wrapper').onmousemove = mouseMove;
 document.onmouseup = mouseUp;
 document.getElementById('panorama_wrapper').onmousedown = mouseDown;

 panorama_width = document.getElementById('panorama_image').clientWidth;
 maxLeft = document.getElementById('panorama_wrapper').clientWidth - panorama_width;
// maxLeft = document.getElementById('panorama_wrapper').clientWidth - panorama_width*2; // 360°パノラマの場合、この行を使用する。
   // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0

 var img = document.getElementById('panorama_image');
 img.style.width = panorama_width*2+"px";

 xcache = 0;

}

function mouseDown(e) {

 if(window.event) e = window.event;
 dragObj = this;
 var x = e.clientX ;  // マウスダウンした場所のスクリーンの座標
 dx = x - xcache;  // マウスダウンした場所の画像の座標
}

function mouseMove(e) {

 if(!dragObj)return;
 if(window.event) e = window.event;
 var x = e.clientX ;
 var xcache_tmp = x - dx; // ドラッグによる移動量

// if ( xcache_tmp >0 ) {xcache_tmp -= panorama_width;}  // 360°パノラマの場合、この行を使用する。
// if ( xcache_tmp <maxLeft ) {xcache_tmp += panorama_width;} // 360°パノラマの場合、この行を使用する。

 if(maxLeft < xcache_tmp && 0 >= xcache_tmp){ // 画像が可動の範囲であれば実行
  document.getElementById('panorama_image').style.left = xcache_tmp + "px";
  xcache = xcache_tmp; // 画像の左端のスクリーンの左端に対する座標
 }

 if(window.event) window.event.returnValue = false;
 else return false;

}

function mouseUp (e) {
 dragObj = null;
}

◆css(panorama.css)

div#panorama_wrapper {
 overflow: hidden;
 position: relative;
}

div#panorama_image {
 position: absolute;
 cursor : pointer;
}

◆その他

パノラマ写真を作るにはImage Composite Editorが便利です。

参考にしたページ

Javascriptでパノラマ写真をドラッグ

2013-09-30

javascript：パノラマ写真を自動スクロール（simplyScroll）

サンプル

◆html

<!DOCTYPE html>
<html lang="ja">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PanoramaScroll</title> 
<link rel="stylesheet" href="css/jquery.simplyscroll.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.simplyscroll.js"></script>

<script>

(function($) {
 $(function() {
  $("#scroller").simplyScroll({
   speed: 3, autoMode: 'loop'
  });
 });
})(jQuery);

</script>

</head> 

<body> 

<h3>伊予ヶ岳頂上からの展望</h3>
<ul id="scroller">
 <li><img src="iyogatake-1.jpg" height="200" width="323"></li>
 <li><img src="iyogatake-2.jpg" height="200" width="323"></li>
 <li><img src="iyogatake-3.jpg" height="200" width="323"></li>
 <li><img src="iyogatake-4.jpg" height="200" width="323"></li>
</ul>

</body> 
</html>

jquery.simplyscroll.js：simplyScrollからダウンロード
jquery.simplyscroll.css：simplyScrollからダウンロード
jquery.js：jQueryからダウンロード

参考にしたページ

simplyScroll | 設置サンプル

以上

javascript：画面を分割して下部だけスクロールさせる

サンプル

◆html

<!DOCTYPE html>
<html lang="ja">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FlckrPhotoSet</title> 
<link rel="stylesheet" href="css/Flickr_photoset.css">
<script src="js/oauth.js"></script>
<script src="js/jquery.js"></script>
<script src="js/Flickr_photoset.js"></script> 

<script>
 var photoset_id = '72157635974998255'
 var consumerKey = 'f4bc240df0b0418fb80e3719ec173dc0';
</script> 

</head> 

<body> 
 <div id="header">Loading...</div>
 <div id="contents">Loading...</div> 
</body> 

</html>

19行目："header"と20行目："contents"に分割して、"contents"の部分をスクロールできるようにする。

◆javascript

// #contentsの高さを全体の高さからheaderの高さと20pxとを引いた高さにする
 var document_height = $(document).height();
 var header_height = $(header).height();
 document.getElementById('contents').style.height = (document_height - header_height-20) + "px";

全体(document)の高さから"height"の高さを引いたものを"contents"の高さに設定している。
（ここでは、マージンをもってさらに20px引いた高さに設定している。）
"header"の高さが内容によって変わっても大丈夫。

◆css

html, body {
 height:  100%;
 margin: 0px;
 padding: 0px;
 overflow: hidden;
}

#header {
 background-color: white;
}

#contents {
 overflow: auto;
 background-color: #EFE;
}

5行目：全体のスクロールを禁止している。
13行目："contents"部分はスクロールするようにしている。

登録: 投稿 (Atom)

ページ

2020-07-18

2020-06-28

2013-11-08

◆html

◆javascript(slideshowImgInHtml.js)

参考にしたページ

2013-10-30

2013-10-29

2013-10-21

◆リファレンス

◆JSON

[参] http://hakuhin.jp/js/json.html#JSON_00

◆in演算子

◆クォーテーションマークの入れ子

document.write("<a href='javascript:document.write(￥"あいうえお￥")'>");

◆べき乗

◆配列の生成

◆条件演算子（? :）

2013-10-20

◆html

◆javascript(Blob.js)

◆javascript(jquery.js)

参考にしたページ

参考ページ

◆使い方

◆要素の生成

var element = $("<p></p>");↓<p></p> var element = $("<p class='description'>テキスト</p>"); ↓<p class="description">テキスト</p> var element = $("<p>", {class: "description", text: "テキスト"});↓<p class="description">テキスト</p>

◆要素の選択

◆要素の追加

◆要素の削除

◆テキストの設定

◆属性の設定

◆全ての要素に対して関数を実行する

◆jQuery を高速に使う CSS セレクタの書き方

◆jQueryでimgタグのsrc情報を取得する方法。

◆jQuery で自分自身のHTMLを取得する方法

◆classの追加、削除、取得

◆html

◆javascript(FileInput.js)

参考にしたページ

◆html

◆javascript(FileInput.js)

参考にしたページ

2013-10-03

◆html

◆javascript(panorama.js)

◆css(panorama.css)

◆その他

参考にしたページ

2013-09-30

◆html

参考にしたページ

◆html

◆javascript

◆css

var element = $("<p></p>");
↓<p></p>

var element = $("<p class='description'>テキスト</p>");
↓<p class="description">テキスト</p>

var element = $("<p>", {class: "description", text: "テキスト"});
↓<p class="description">テキスト</p>