上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 擬似的に画像がローリングしているように見せるスクリプト。
 簡単なアニメーションは、フラッシュを使わずスクリプトでも。



見本


rolling-001.png





ローリング画像スクリプトひな形

<div style="text-align:center;">
<img src="http://~画像のURL~" id="rollingimg" style="width:200px;height:300px;border:none;" />
</div>

<script type="text/javascript">
<!--
var wimage=200;
var imgcos=0;

function wimagetime(){
imgcos=imgcos+0.02;
if (imgcos>200) imgcos=0;
document.getElementById("rollingimg").style.width=wimage+"px";
wimage=Math.cos(imgcos)*200;
if (wimage<0) wimage=wimage*-1;
svtime=setTimeout("wimagetime()",0.1);
}
wimagetime();

//-->
</script>



カスタマイズ

■ローリングさせたい任意の画像タグにID名「id="rollingimg"」をつける。
200は、画像の横幅(単位はpx)
0.02は、余弦に与える数値。数値を大きくすると、アニメーションは早くなるが、アニメーションの精度は落ちる。
0.1は、インターバル。数値を小さくすればするほどアニメーションは緻密になるが(相対的にアニメーション速度は遅くなる)CPUへの負荷がかかる。


 メニューページはこちらから。
簡易スクリプトひな形集
このエントリーをはてなブックマークに追加
Thu.07.15.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。