HTML5 canvasでバネ運動

FLASHでよく使うイージングとバネ運動をHTML5のcanvasで描画してみた。
マウスの位置はjQueryのmousemove取得。

デモダウンロード
続きを読む

カテゴリー: canvas, HTML5 | 1件のコメント

グラデーション

AS3のコピペ用のグラデーションサンプル

This movie requires Flash Player 9

続きを読む

カテゴリー: ActionScript3.0, Reference | コメントをどうぞ

jQuery plugin: Tablesorter 2.0

サンプル

jQuery plugin: Tablesorter 2.0
http://tablesorter.com/docs/

<script type="text/javascript">
jQuery(function(){
	$("#myTable").tablesorter({
 
	//widgets: ['zebra']
	//1行間隔で行の背景色を変える
	//<tr>にeven,oddクラス追加
	widgets: ['zebra'],
 
	//sortList: [[列, 並び順]]
	//列は左を0とした数値を指定
	//昇順:0、降順:1 
	sortList: [[0, 0]],
 
	//headers
	//列は左を0とした数値を指定
	//sorter:false 並び無効
	headers: {
		1: {sorter:false},
		8: {sorter:false}
	}
 
	});
});
</script>
カテゴリー: jQuery | コメントをどうぞ

SIMPLEMODAL

サンプル

SIMPLEMODAL
http://www.ericmmartin.com/projects/simplemodal/

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<link type='text/css' href='css/simplemodal.css' rel='stylesheet' media='screen' />
<script type="text/javascript">
jQuery(function () {
	$('#demo-modal a.demo').click(function (e) {
		e.preventDefault();
		$('.demo-modal-content').modal();
	});
 
 
	$('#test-modal a.test').click(function (e) {
		e.preventDefault();
		$('.test-modal-content').modal();
	});
 
	//外部サイトを表示
	$('#yahoo-modal a.yahoo').click(function (e) {
		var src = "http://www.yahoo.co.jp";
		$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
			closeHTML:"",
			containerCss:{
				backgroundColor:"#fff",
				borderColor:"#0063dc",
				height:450,
				padding:0,
				width:830
			},
			overlayClose:true
		});
	});
 
});
</script>
カテゴリー: jQuery | コメントをどうぞ

Simple Accordion

デモ

<style>
<!--
body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF;
}
div#wrapper {
	width: 300px;
	margin: 0px auto;
	padding: 0px;
}
 
h1 {
	margin: 0px 0px 15px 0px;
	padding: 10px;
	font-size: 14px;
	background: #EEEEEE;
}
 
h2 {
	width: 280px;
	margin: 0px;
	padding: 5px 10px;
 
	font-size: 12px;
 
	border-bottom: 1px solid #CCCCCC;
	color: #FFFFFF;
	background: #333333;
 
	cursor: pointer;
}
p {
	width: 280px;
	margin: 0px;
	padding: 5px 10px;
 
	font-size: 12px;
	line-height: 150%;
 
	background: #EEEEEE;
}
-->
</style>
<script type="text/javascript">
jQuery(function(){
	var p = $('p','#accordion');
	p.hide();
 
	$('h2','#accordion').click(function(){
	var next = $(this).next();
	//↓コメントをはずせば、クリックしたもの以外は閉じる
	//p.not(next).slideUp();
	if(next.is(':visible')){
		next.slideUp();
	}else{
		next.slideDown();
	}
	});
});
</script>
<div id="accordion">
	<h2>タイトル</h2>
	<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
	<h2>タイトル</h2>
	<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
	<h2>タイトル</h2>
	<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</div>
カテゴリー: jQuery | コメントをどうぞ