※ 古いコードから移行する時に、 document.all を変更し忘れていましたので修正しました。 ※ IE8 以前のアンチエイリアスが無効になるバグに対応したコードを追加しました IE は 4 の時から使える方法で実装しています。他のブラウザでは CSS3 の transition が使えるようなので、CSS 側に定義して、処理そのものは、JavaScript (タイマー)で実装しました。 このサンプルは、テキストですが、画像でも同じ事です。 ※ setTimeout の時間が、トランジションの時間より大きくなる必要があります
2
1
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();
function a_start() {
if (userAgent.indexOf("msie") > -1) {
if ( a_counter % 2 == 1 ) {
document.getElementById("a2").filters.blendTrans.Apply();
document.getElementById("a2").style.visibility = "hidden";
document.getElementById("a2").filters.blendTrans.Play();
}
else {
document.getElementById("a2").filters.blendTrans.Apply();
document.getElementById("a2").style.visibility = "visible";
document.getElementById("a2").filters.blendTrans.Play();
}
}
else {
if ( a_counter % 2 == 1 ) {
document.getElementById("a2").style.opacity = 0;
}
else {
document.getElementById("a2").style.opacity = 100;
}
}
setTimeout("a_next();", 7000 );
}
function a_next() {
if ( a_counter % 2 == 1 ) {
document.getElementById("a2").innerHTML = a_counter.toString();
}
else {
document.getElementById("a1").innerHTML = a_counter.toString();
}
a_counter++;
if ( a_counter > 8 ) {
a_counter = 1;
}
a_start();
}
</script>
<style type="text/css">
#base {
position:relative;
width:500px;
height:300px;
}
#a1,#a2 {
width:100%;
height:100%;
background-color:#fff;
font-size:250px;
position:absolute;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
filter:blendTrans(duration=3);
}
</style>
<div id="base">
<div id="a1">2</div>
<div id="a2">1</div>
</div>
<input
value="go"
type='button'
onclick='a_start();this.style.visibility="hidden"'
/>
▼ 以下は、IE8 以前のアンチエイリアスが無効になるバグに対応したものです
<script type="text/javascript">
var a_counter = 2;
function a_start_ie8() {
document.getElementById("a2").style.visibility = "visible";
document.getElementById("a1").innerHTML = a_counter.toString();
document.getElementById("a2").filters.blendTrans.Apply();
document.getElementById("a2").style.visibility = "hidden";
document.getElementById("a2").filters.blendTrans.Play();
setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {
document.getElementById("a2").innerHTML = a_counter.toString();
a_counter++;
if ( a_counter > 5 ) {
a_counter = 1;
}
a_start_ie8();
}
</script>
<style type="text/css">
#base {
position:relative;
width:500px;
height:300px;
}
#a1,#a2 {
width:100%;
height:100%;
background-color:#fff;
font-size:250px;
position:absolute;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
filter:blendTrans(duration=3);
}
</style>
<div id="base">
<div id="a1">2</div>
<div id="a2">1</div>
</div>
<input
value="go"
type='button'
onclick='a_start_ie8();this.style.visibility="hidden"'
/>
関連する記事 IE 兼用背景 Fade transition の実装
|
|
【記録の最新記事】
- Java、PHP、jQuery : 最近の記事と関連する記事のまとめ / インデックス
- Google MAP API が 1日に 25,000 ビューを超えると表示される画面
- WEB フォントをクロスドメインで利用する
- ブログ更新通知先に関する情報
- さくらインターネットの CRON の設定で、標準エラー出力を postmaster に送らない
- VBScript 用 onClick 一行書き
- 『家に帰ると妻が必ず死んだふりをしています』というブログを発見しました
- Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできないのは、Windows7 のエアロ系で起きるようです。
- Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできない問題が、開発版(34.0.1794.5 canary) で修正されたそうです
- Google Chrome 32.0.1700.76 の具体的な問題点
- ファイル名リストをクリップボードへコピー
- キーボード説明用画像( フリーフォントでキーボード画像作成 )
- 何だこれ。Microsoft の 看板的ワードの誤字『EIblog をご覧ください。』って・・・
- 9月27日10時頃、Google Chrome でのみ AdSense の表示がおかしくなりましたが・・・
- 注意 : フィッシング詐欺メールのタイトル『【ドラゴンクエストX 目覚めし五つの種族 オンライン】認証』
- まぎらわしい『AdSenseの終了』を知らせる『日本語ページ』
- Trigger Rally(WebGL+Three.js) のコースを無視してひたすら悪路を走りまくる
- Windows 8.1 に期待は無いけれど、3D プリンタへの期待は膨らむのです
- Adobe Readerの脆弱性を突かれて人生初の『ウィルス』に感染・・・
- また４月なんで、フリーのレンタルサーバーの確認してみると・・・
