この投稿の個別ページを開いて、記事の下にある画像あるいはヘッダー画像の上にマウスを乗せると、
各々の画像が回転する。但し、ＩＥ（インターネット・エクスプローラ）では正常に働かない。
このソースは、「 HTMLとCSSで基礎から学ぶJavaScript」（園田 誠 著、秀和システム出版）に
書かれていたものを書き写して作成し、WordPressの「カスタムフィールド」の値として写し込んだ。
投稿画面の「HTML」ウインドーに中に写し込んでも、単にソースの文字が表示されるだけだった。
- I_Rot: <!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>New画像ビューワー</title>
<style>
/* この部分は画像を初めから90度回転*/
img#img_a{
/*CSSの記述*/
transitiont:ransform 0.5s linear;
/*ここから下はブラウザ固有の設定*/
-webkit-transition:-webkit-transform 5s linear 0s;/*Chrome Safari */
-moz-transition:-moz-transform 5s linear 0s ; /*Firefox*/
-o-transition:-o-transform 5s linear 0s;/*Opera*/
/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);*/
}
/* 次は、マウスが乗ったら画像が回転（IE用記述なし）。この動作には上の記述も必要*/
img#img_a:hover{
/*CSSの記述*/
transform:rotate(360deg);
/*ここから下はブラウザ固有の設定*/
-webkit-transform:rotate(720deg);/*Chrome Safari */
-moz-transform:rotate(720deg); /*Firefox*/
-o-transform:rotate(720deg);/*Opera*/
}
</style>
</head>
<body>
<h1> img:Hoverのテスト </h1>
<div>
<p id="cont">画像にマウスを乗せると回転します</p>
<img src="http://oursatra.sakura.ne.jp/nakamura/wp-content/uploads/2011/07/くちなし1.jpg" width="200" id="img_a">
</div>
</body>
</html>
2012年5月15日 7:54 AM |
カテゴリー：習作HTML5 |
コメント（0）
このアニメ画像は、W3Cのウェブサイトに掲載されているCanvasによる作成例です。
HTMLの<canvas>要素とスクリプトだけで作成されており、 Flashなどのプラグインや画像は一切使用されていません。
HTMLソースは http://www.htmq.com/canvas/001.shtml から貰ってきた。
Canvas画像は、当初は「前の記事」などの下段の「カスタムフィールド」に表示されており、また、
個別ページを開かないと動作しなかったが、index.phpおよびstyle.cssを編集することにより、
記事と一体化し、記事一覧画面でも動作するようになった。
index.phpの編集要点は、?php the_content(); ? ?php the_meta(); ? p class=”postinfo”と、
?php the_meta(); ? を p class・・の前に置いたこと。
style.cssの要点は、次のようにpost-meta-・・をdiv.postにまとめたこと。
div.postという書き方は間違っているかも。
div.post post-meta-key {text-align: center;color: red; font-weight: bold; font-size: 50%;}
div.post post-meta {font-variant: small-caps; color: blue; clear: both;}
なお、プラグインは使用しておらず、HTMLソースはカスタムフィールドの値として記載している。
- Lart: <!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pretty Glowing Lines</title>
</head>
<body>
<canvas width="450" height="250"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>
</body>
</html>
2012年5月14日 11:37 AM |
カテゴリー：習作HTML5 |
コメント（0）
- DOM制御2: <!DOCTYPE html>
<html>
<head>
<meta charset="utf8"> <!--①-->
<title>タブ式表示の作成３</title>
<!--ここからJavaScript-->
<script>
function P2A(x){
if(x==1){
document.write("トマトを食べるといいよ");
}
if(x==2){
document.write("ビールを飲むといいよ");
}
if(x>2){
document.write("もう一度やり直してください。
やり直すにはブラウザーを更新します");
}
}
</script>
<!--ここまでがJavaScript-->
<!--17行のは必須-->
</head>
<body>
<p>下のボタンを押すとFunctionが呼び出されます<br>
今の気分はどちらが近いでしょうか？</p>
<!--上のボタン-->
<button onClick="P2A(1);">ビタミンが足りていないような気がする</button>
<br>
<br>
<!--下のボタン-->
<button onClick="P2A(2);">夏バテぎみ、のども乾いた</button>
<br>
<br>
<!--余分のボタン-->
<button onClick="P2A(3);">このボタンは付けたし</button>
</body>
</html>
2012年5月13日 10:49 PM |
カテゴリー：習作HTML5 |
コメント（0）
- DOM制御: <!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>CSSを操作する１</title>
<!--ここからJavaScript-->
<script>
//ボタンを押すと実行されるfunction
xyz=7;
function addNode(){
xyz=xyz-1;
//追加する子ノードを生成する
var CHILD = document.createElement("p");
//子ノードの属性を指定する。IDをCLDとする
CHILD.setAttribute("id","CLD");
//このノードのタグで囲まれた部分のテキストを設定する
CHILD.innerHTML = "これが"+xyz+"番目に追加されたpタグ領域です";
//どこに追加されるのか、親ノードを指定する
var PARENT = document.getElementById("123");
//これが子ノードを追加する命令 appendChild(CHILD)では書き出しが最後になる
//下式は子ノードの先頭に挿入の意味
//PARENT.insertBefore(CHILD,PARENT.firstChild);
//別方式の挑戦、次に式では(0と1は同じで前に、2と3が同じで後ろに来る
alert(xyz);
PARENT.insertBefore(CHILD,PARENT.childNodes.item(xyz));
//書き出された子ノードにCSSを後付で指定する
//先ずは、getElementByIdを使って追加したノードを抽出する
var CLD = document.getElementById("CLD");
//CSSでcolor:#ff0000;と指定するのと同等
if(xyz==0){
CLD.style.color="#ff0000";
}
if(xyz==1){
CLD.style.color="#ffff00";
}
if(xyz==2){
CLD.style.color="#ffffff";
}
if(xyz==3){
CLD.style.color="#0000ff";
}
if(xyz==4){
CLD.style.color="#00ffff";
}
if(xyz>4){
CLD.style.color="#000000";
}
//CSSを使ってボタンを消す
//document.getElementById("BTN").style.display = "none";
}
</script>
<!--ここまでがJavaScript-->
</head>
<body>
<h1>ノードを追加します</h1>
<!--idを指定する-->
<div id='123'>
<p>１番目のp</p>
<p>２番目のp</p>
<p>３番目のp</p>
<p>４番目のp</p>
</div)
<div>
<p>ここはHTMLで書き出されているテキストです。<br>
ボタンを押すと、この上に赤いテキストが追加されます<br>
ボタンは1回押すと押せなくなります</p>
</div>
<button id="BTN" onClick="addNode();">見出しの下にテキストを追加します</button>
</body>
</html>
2012年5月10日 9:47 PM |
カテゴリー：習作HTML5 |
コメント（0）
