X_NOTE: 10月 2013

jQueryのanimationにイージングをつける「jquery.easing.js」の設置方法。

（１）以下のページでダウンロードする。
jQuery Easing Plugin (version 1.3)

（２）jQueryと共にこのプラグインを<head>の中に入れてリンクを繋げる。

（３）jQueryのanimationを使っている部分に好きなイージングを書き込む。
※イージングは「jQuery日本語リファレンス」で動きを確認できる。

参考サイト
・jQuery日本語リファレンス-Easing/jQuery
・jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた

google mapsカスタマイズまとめ

図のコードは以下

mygmap.js

var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶
 function initialize() {
  //地図初期化
  var initPos = new google.maps.LatLng(37.916192, 139.036413);
  var myOptions = {
   center : initPos,
   zoom : 4,
   mapTypeId: google.maps.MapTypeId.ROADMAP
     };

var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 //マーカー1,2を作成
 var markerPos1 = new google.maps.LatLng(35.69384, 139.703549);
 var markerPos2 = new google.maps.LatLng(34.693738, 135.502165);
 var markerPos3 = new google.maps.LatLng(35.011636, 135.768029);
 var markerPos4 = new google.maps.LatLng(33.590355, 130.401716);
 var markerPos5 = new google.maps.LatLng(38.268837, 140.8721);
 createMarker(map_canvas, markerPos1, "
新宿
"+"
詳細
");
 createMarker(map_canvas, markerPos2, "
大阪
"+"
詳細
");
 createMarker(map_canvas, markerPos3, "
京都
"+"
詳細
");
 createMarker(map_canvas, markerPos4, "
福岡
"+"
詳細
");
 createMarker(map_canvas, markerPos5, "
宮城
"+"
詳細
");
 }
 function createMarker(map, latlng, text) {
 var infoWndOpts = {
 content : text,
 };
 var infoWnd = new google.maps.InfoWindow(infoWndOpts);
 
 
 // マーカー画像を作成 
 var markerImg = new google.maps.MarkerImage( 
 // マーカーの画像URL 
 "images/common/marker.png", 
 
 // マーカーのサイズ 
 new google.maps.Size(31, 37), 
 
 // 画像の基準位置 
 new google.maps.Point(0, 0), 
 
 // Anchorポイント 
 new google.maps.Point(10, 37) 
 );

gmapv3.css

@charset "utf-8";
@import url("gh-buttons.css");
/* selector */
html,body{margin:0;padding:0;font-size:12px;height:100%;line-height:1.5;word-break:break-all;}
body{margin:10px;}
textarea#res{margin:10px 0;width:498px;padding:0;height:100px;font-size:9px;box-sizing: border-box;}
h1, h2, h3, p{display:block;margin:10px 0;font-size:100%;}
pre{overflow:auto;}
/* class */
.w100p{width:100%;}
.cf:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.cf{display:inline-block;}
html[xmlns] .cf{display:block;}
* html .cf{height:1%;}
.size{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;}
.shadow{box-shadow:1px 1px 2px #888;-webkit-box-shadow:1px 1px 2px #888;-moz-box-shadow:1px 1px 2px #888;-ms-box-shadow:1px 1px 2px #888;-o-box-shadow:1px 1px 2px #888;}
/* map_canvas */
#map_canvas{
 width:386px;
 height:320px;
}
#zoomlevel span{font-weight:bold;font-size:120%;}
#res{color:red;}
/* infowindow */
dl#infowin1{margin:0;padding:0;}
dl#infowin1 dt{margin:0;padding:0;font-weight:bold;}
dl#infowin1 dd{margin:5px 0 0 0;padding:0;line-height:1.5;}
dl#infowin1 dd img{padding:2px;background:#fff;border:1px solid #ccc;margin-right:5px;}
dl#infowin2{margin:0;padding:0;}
dl#infowin2 dt{margin:0;padding:0;font-weight:bold;}
dl#infowin2 dd{margin:5px 0 0 0;padding:0;line-height:1.5;}
dl#infowin2 dd img{padding:2px;background:#fff;border:1px solid #ccc;margin-right:5px;}
@media only screen and (min-device-width:768px) and (max-device-width:1024px){
 #map_canvas { width:100%;height:100%;}
}
@media only screen and (min-device-width:320px) and (max-device-width:480px){
 #map_canvas { width:100%;height:100%;}
 textarea#res { width:100%;}
}
/* map */
#map{width:100%;height:100%;margin:0;padding:0;}
/* infowindow */
.infowin{font-size:11px;overflow:visible;line-height:1;}
.infowin p{margin:5px 0;padding:0;}
.infowin .picframe{overflow:hidden;text-align:center;}
.infowin .picframe img{border:2px solid #fff;overflow:hidden;margin:5px;}
.infowin .ttl{width:96%;overflow:hidden;}
.infowin .ttl b{font-size:130%;overflow:hidden;}
.infowin .ttl img{margin-right:10px;width:16px;height:16px;float:left;overflow:hidden;}
.infowin ul{margin:0;padding:0;list-style:none;}
.infowin li{margin:0;padding:0;list-style:none;}
.infowin table{margin:5px 0;padding:0;border:1px solid #ccc;border-collapse:collapse;width:100%;}
.infowin th{margin:0;padding:0;border:1px solid #ccc;width:6em;white-space:nowrap;text-align:center;}
.infowin td{margin:0;padding:0 0 0 1em;border:1px solid #ccc;text-align:left;}
.infowin th span{display:block;font-weight:normal;}
.infowin .comment{margin:5px 0;padding:0;height:100px;background:#eee;overflow:auto;}
/* panowin */
.panowin{font-size:11px;overflow:visible;line-height:1;margin:0;padding:0;}
.panowin .thumb{text-align:center;}
.panowin .thumb img{border:2px solid #fff;}
.panowin p{margin:5px 0 0 0;padding:0;}
/* custom infowindow */
.customwin{border:1px solid #a0a0a4;line-height:1;margin:0;padding:0;padding:5px;background:#fff;margin-bottom:33px;margin-top:33px;font-size:11px;}
.customwin a{color:#666;}
.customwin .logo{width:119px;height:25px;}
.customwin .author{margin:0;padding:0;}
.customwin .thumb{margin:0 auto 5px auto;padding:0;width:100%;}
.customwin .thumb img{display:block;width:100%;}

html

参考サイト
・google map 活用講座
・PHP&JavaScript Room　「情報ウィンドウ」
・google developers 「Info windows」
・lopan 「Google Maps APIのおさらい。」

X_NOTE

2013年10月4日金曜日

jQueryのanimationにイージングをつけるプラグインの使い方「jquery.easing.js」

2013年10月3日木曜日

google maps カスタマイズまとめ（複数マーカー&オリジナルマーカー&情報ウィンドウのカスタマイズなど）

jQueryでhtmlの簡単ローディング

2013年10月1日火曜日

スマホの傾きを検出してParallax効果を作れる「parallax.js」

スムーススクロールにバウンドなどのアニメーションを加えるjQueryプラグイン「AnimateScroll」

PCサイトでもスマホサイトのようにサイドバーを実装する「Sidebar Transitions」