SafariでIEなどのページ遷移エフェクトをWebページに追加するにはどうすればよいですか?Safariでページ遷移効果?
4
A
答えて
2
この例は、http://sachiniscool.blogspot.com/2006/01/implementing-page-transitions-in.htmlです。 AJAXとCSSを使ってFirefoxでページ遷移をエミュレートする方法について説明します。同様の方法がSafariでも機能します。以下のコードはそのページから取得され、わずかにフォーマットされています:
var xmlhttp;
var timerId = 0;
var op = 1;
function getPageFx() {
url = "/transpage2.html";
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
} else getPageIE();
}
function xmlhttpChange() {
// if xmlhttp shows "loaded"
if (xmlhttp.readyState == 4) {
// if "OK"
if (xmlhttp.status == 200) {
if (timerId != 0)
window.clearTimeout(timerId);
timerId = window.setTimeout("trans();",100);
} else {
alert(xmlhttp.status)
}
}
}
function trans() {
op -= .1;
document.body.style.opacity = op;
if(op < .4) {
window.clearTimeout(timerId);
timerId = 0; document.body.style.opacity = 1;
document.open();
document.write(xmlhttp.responseText);
document.close();
return;
}
timerId = window.setTimeout("trans();",100);
}
function getPageIE() {
window.location.href = "transpage2.html";
}
1
チェックアウトScriptaculousあなたが何を指しているのかは、IE-Only JSを避けてください。
関連する問題
- 1. Vue.jsページ遷移フェード効果とvue-router
- 2. ワンフォーム遷移効果
- 3. テーブル行の遷移効果
- 4. 遷移のスクロール効果
- 5. 遷移効果とインテント
- 6. OpenGL画面遷移効果?
- 7. アンドロイドでのアクティビティ間の遷移効果
- 8. scrollToページ遷移効果を遅らせる
- 9. ページ遷移アニメーション
- 10. このページ遷移効果はどのように達成できますか?
- 11. UWPページ遷移アニメーション
- 12. CSSのページ遷移
- 13. uipageviewcontrollerの遷移ページ
- 14. jQuery Mobileでdata-role = "header"のページ遷移を無効にする
- 15. 高度なWebページ遷移
- 16. HTML5 - フリップブックのページ遷移
- 17. 動的なページ遷移
- 18. ウェブサイト上のページ遷移?
- 19. デスクトップサイトのJquery Mobileページ遷移?
- 20. バックボーンによるページ遷移
- 21. ビュー切り替え中の遷移効果
- 22. JSを使用したメニュー遷移効果
- 23. masonry.js - それらに遷移効果があるレイアウト項目
- 24. アンドロイドでページ遷移がスムーズでない
- 25. HTMLページ間で遷移する方法
- 26. jQueryモバイルでのiscrollページ遷移
- 27. ページ間で左に遷移する
- 28. イオン2のページ遷移を無効にするRC.0
- 29. jQueryの - 画像の代替遷移[Safariで問題]
- 30. 背景位置遷移がSafariで動作しない
すべてのブラウザでの動作Firefox 5は、IEの移行が行われるページURLを変更しないことです。 Chrome 12とSafari 5.1では、ブラウザは最初のページをスキップし、そのページのリファラーに行きます。しかしこれはFireFoxでも機能します。このテストは、この回答に引用されている元のURLを介して実行され、上に貼り付けられたコードは実行されませんでした。 –