JavaScript

[javascript]jQueryPlugin:fancybox ビューワー

サンプル
 

基本

 
グルーピング マウスホイールでも


 
説明文位置調整

 
テキスト1 テキスト2
 
swf
 

ペンギン (英語: penguin) は、鳥類ペンギン目(学名 Sphenisciformes)に属する種の総称である。ペンギン科(学名 Spheniscidae)のみが現生する。
南半球の広い緯度範囲に分布する。主に南極大陸で繁殖するのはコウテイペンギンとアデリーペンギンの2種のみである。ほかに、ジェンツーペンギン・マカロニペンギン・ヒゲペンギンの3種は、南極大陸の中でも比較的温暖な南極半島にも繁殖地があるが、主な繁殖地は南極周辺の島である。他の種類は南アメリカ・アフリカ南部・オーストラリア・ニュージーランド、あるいは南極周辺の島などに繁殖地がある。
ペンギン (英語: penguin) は、鳥類ペンギン目(学名 Sphenisciformes)に属する種の総称である。
ペンギン科(学名 Spheniscidae)のみが現生する。
Close


参考にしたサイト

Fancybox – Fancy lightbox alternative
http://fancybox.net/
 

[javascript]jQueryPlugin:lightbox ビューワー

サンプル



参考にしたサイト

jQuery lightBox plugin
http://leandrovieira.com/projects/jquery/lightbox/
 

[javascript]jQueryPlugin:ScrollToにFlashのTweenクラスを移植

移植しました。
前に似たようなのを作った気がしますが、今回はjQueryです。
 
サンプル
/blog/childpage/jquery/03/index.html
 
移植していない普通のScrollToの使い方はこちら
plugin:ScrollTo 指定エレメントまでスクロールする
 

javascript

$(document).ready(init);
function init(){
	$.easing.easeNone=function(x, t, b, c, d) {
		return c * t / d + b;
	};

	$.easing.RegularEaseOut=function(x, t,b,c,d){
		return -c * (t /= d) * (t - 2) + b;
	};
	$.easing.RegularEaseIn=function(x, t,b,c,d){
		return c * (t /= d) * t + b;
	};
	$.easing.RegularEaseInOut=function(x, t,b,c,d){
		if((t /= d / 2) < 1)return c / 2 * t * t + b;
		return -c / 2 * ((--t) * (t - 2) - 1) + b;
	};

	$.easing.StrongEaseOut=function(x, t,b,c,d){
		return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
	};
	$.easing.StrongEaseIn=function(x, t,b,c,d){
		return c * (t /= d) * t * t * t * t + b;
	};
	$.easing.StrongEaseInOut=function(x, t,b,c,d){
		if((t /= d / 2) < 1)return c / 2 * t * t * t * t * t + b;
		return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
	};

	$.easing.ElasticEaseOut=function(x, t,b,c,d){
		if(t == 0)return b;
		if((t /= d) == 1)return b + c;
		var p = d * 0.3;
		var a=c;
		var s = p / 4;
		return a * Math.pow(2, -10 * t) *Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
	};
	$.easing.ElasticEaseIn=function(x, t,b,c,d){
		if(t==0)return b;
		if((t /= d) == 1)return b + c;
		var p=d * 0.3;
		var a=c;
		var s=p/4;
		return -(a * Math.pow(2, 10 * (t -= 1)) *Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
	};
	$.easing.ElasticEaseInOut=function(x, t,b,c,d){
		if (t == 0)return b;
		if ((t /= d / 2) == 2)return b + c;
		var p = d * (0.3 * 1.5);
		var a=c;
		var s=p/4;
		if (t < 1)return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *Math.sin((t * d - s) * (2 * Math.PI) /p)) + b;
		return a * Math.pow(2, -10 * (t -= 1)) *Math.sin((t * d - s) * (2 * Math.PI) / p ) * 0.5 + c + b;
	};

	$.easing.BounceEaseOut=function(x, t,b,c,d){
		if ((t /= d) < (1 / 2.75)){
			return c * (7.5625 * t * t) + b;
		}else if (t < (2 / 2.75)){
			return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
		}else if (t < (2.5 / 2.75)){
			return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
		}else{
			return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
		}
	};
	$.easing.BounceEaseIn=function(x, t,b,c,d){
		return c - $.easing.BounceEaseOut(x,d - t, 0, c, d) + b;
	};
	$.easing.BounceEaseInOut=function(x, t,b,c,d){
		if (t < d/2){
			return $.easing.BounceEaseIn(x,t * 2, 0, c, d) * 0.5 + b;
		}else{
			return $.easing.BounceEaseOut(x,t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
		}
	};

	$.easing.BackEaseOut=function(x, t,b,c,d){
		var s = 1.70158;
		return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
	};
	$.easing.BackEaseIn=function(x, t,b,c,d){
		var s = 1.70158;
		return c * (t /= d) * t * ((s + 1) * t - s) + b;
	};
	$.easing.BackEaseInOut=function(x, t,b,c,d){
		var s = 1.70158;
		if ((t /= d / 2) < 1)return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
		return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
	};

	$('div#main a').click(when_a_release);
	$.scrollTo('#top', 0);
}
function when_a_release(){
	$.scrollTo(this.hash, 800, {easing:this.innerHTML.split(" ").pop()});
	return false;
}

 
参考にしたサイト
 
Ariel Flesler: jQuery.ScrollTo
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
 
ScrollTo | jQuery Plugins
http://plugins.jquery.com/project/ScrollTo
 

[javascript]iPhoneタッチイベント

iPhone,iPodTouch,iPadのSafariでは、javascriptでタッチしたかどうか取得することが出来ます。
ここにそのサンプルを記します。

iPhone,iPodTouch,iPadで下記アクセス。
/js/07/
 

html

<div id="field" onSelectStart="return false;" onMouseDown="return false;">
	<div id="output">touch me !</div>
	<div id="cross"></div>
</div>

 

CSS

body{
	padding:0;
	margin:0;
}
div#field{
	padding:0;
	margin:0;
	width:320px;
	height:416px;
	border-bottom:1px solid;
	position:absolute;
}
div#output{
	padding:0;
	padding-top:20px;
	margin:0;
	width:320px;
	font-size:12px;
	text-align:center;
	text-weight:bold;
	border:none;
	position:absolute;
	z-index:80;
}
div#cross{
	background-image:url(../image/cross.gif);
	width:21px;
	height:21px;
	position:absolute;
	z-index:30;
	display:none;
}

 

javascript

setInterval(oef_check, 1000/30);
var mc;
mc=document.getElementById("field");

//タッチした時
mc.addEventListener("touchstart", onTouchStart, false);
//指が動いた時
mc.addEventListener("touchmove", onTouchMove, false);
//指が離れた時
mc.addEventListener("touchend", onTouchEnd, false);
//イベントがシステムによってキャンセルされた時
mc.addEventListener("touchcancel", onTouchCancel, false);

//2本の指がタッチした時
mc.addEventListener("gesturestart", onGestureStart, false);
//2本の指が動いた時
mc.addEventListener("gesturechange", onGestureChange, false);
//指が0~1本になった時
mc.addEventListener("gestureend", onGestureEnd, false);

function onTouchStart(e){
	e.preventDefault();
	st1="onTouchStart";
	tlist=e.touches;
	set_touch_center();

}
function onTouchMove(e){
	e.preventDefault();
	st1="onTouchMove";
	tlist=e.touches;
	set_touch_center();

}
function onTouchEnd(e){
	e.preventDefault();
	st1="onTouchEnd";
	tlist=e.touches;
	set_touch_center();

}
function onTouchCancel(e){
	e.preventDefault();
	st2="onTouchCancel";
	tlist=e.touches;
	set_touch_center();
}

function onGestureStart(e){
	e.preventDefault();
	st2="onGestureStart";
	tlist=e.touches;
	set_touch_center();

}
function onGestureChange(e){
	e.preventDefault();
	st3="onGestureChange";
	tlist=e.touches;
	set_touch_center();

}
function onGestureEnd(e){
	e.preventDefault();
	st2="onGestureEnd";
	st3="";
	tlist=e.touches;
	set_touch_center();

}
function set_touch_center(){
	var a;
	var m;
	var bx=0;
	var by=0;
	for(a=0;a<tlist.length;a++){
		m=tlist[a];
		bx+=m.pageX;
		by+=m.pageY;
	}
	bx/=tlist.length;
	by/=tlist.length;
	tc.x=bx;
	tc.y=by;
}
function oef_check(){
	var s="";
	s+=st1;
	s+="<br>";
	s+=st2;
	s+="<br>";
	s+=st3;
	s+="<br>";
	if(tlist.length>0)s+="タッチの中心座標 x:"+tc.x+"y:"+tc.y+"";
	var mc=document.getElementById("output");
	mc.innerHTML=s;
	mc=document.getElementById("cross");
	mc.style.left=(tc.x-10)+"px";
	mc.style.top=(tc.y-10)+"px";
	mc.style.display="block";
}

[javascript]JSONP

JSONP(JSON with padding)
クロスドメインなデータを取得する一番シンプルなやり方です。
サンプル
 

javascript

var php='action.php';
var mc=document.createElement('script');
mc.type='text/javascript';
mc.src=php+'?callback=when_get_data';
document.getElementsByTagName('head')[0].appendChild(mc);

function when_get_data(m){
	m=eval(m);
	var a;
	var b="";
	for(a in m){
		b+=a+":"+m[a]+"\n";
	}
	get_item("output").innerHTML=b;
}

 

PHP

<?php
$dat=array('name'=>'John', birthday=>'19731129', 'time'=>date('Y/m/d H:i:s'));
$res='(' . json_encode($dat) . ')';
if($_GET['callback']){
	$res=$_GET['callback'] . '(\'' . $res . '\');';
}
header('Content-Type: text/javascript; charset=utf-8');
echo $res;
?>