私はこのウェブページを持っています: http://miloarc.pyrogenicmedia.com/
どのatmも特別なものではありません。いくつかの効果がありますが、銀行を壊すものはありません。
タイルの上にマウスを置くと、不透明度が変化してフェード効果が得られます。これは、CSS ではなく Jquery アニメーションを介して行われます (単純な変更ではなく、フェードできるようにするためです)。ページが読み込まれるとすべてが見栄えがよく、フェードも完璧に見えます。実際、マウスをあちこちにドラッグすると、ほとんどヘビのような「軌跡」が得られます。
とにかく、私の次の問題は、左上にボックスがあり、ホバリングしているタイルに関する情報が表示されることです。これはうまくいくようです。その情報ボックスにマウスを合わせると、その位置が切り替わります (以前はその下に隠れていたタイルにアクセスできるようになります)。私の理解では、これはすべて正常に機能しており、文字どおりです。
ただし、情報ボックスを1回移動した後（1回のホバー）。Firefox でページを表示すると動作が遅くなります。同様に、情報ボックスの移動が成功した後、フェード効果が非常に不安定になり、イベントをすばやく取得できなくなり、画面に「軌跡」を描くことができなくなります。
Chrome にはこの問題はありません。何となくうまくいきそうです。サファリも大丈夫そうです。マウスを非常に速く動かすと気付きますが、少しジャンプしますが、Firefox ほどではありません。
Internet Explorer がまったく動作しません。ブラウザがクラッシュするようです...そして、使用している角丸プラグインにエラーがあります（理由はわかりません...）。
全体として、コード内で何をしていても、非常に遅くなければならないと思います。しかし、私はそれがどこで起こっているのかわかりません。
ここに完全なコードがありますが、リンクにアクセスしてすべてを表示することをお勧めします。
<script type="text/javascript">
$(document).ready(function()
{
var WindowWidth = $(window).width();
var WindowMod = WindowWidth % 20;
var WindowWidth = WindowWidth - WindowMod;
var BoxDimension = WindowWidth / 20;
var BoxDimensionFixed = BoxDimension - 12;
var dimensions = BoxDimensionFixed + 'px';
$('.gamebutton').each(function(i)
{
$(this).css('width', dimensions);
$(this).css('height', dimensions);
});
var OuterDivHeight = BoxDimension * 10;
var TopMargin = ($(window).height() - OuterDivHeight) / 2;
var OuterDivWidth = BoxDimension * 20;
var LeftMargin = ($(window).width() - OuterDivWidth) / 2;
$('#gamePort').css('margin-top', TopMargin).css('margin-left', LeftMargin).css('margin-right', LeftMargin);
$('.gamebutton img').each(function(i)
{
$(this).hover(
function () {
$(this).animate({'opacity': 0.65});
},
function () {
$(this).animate({'opacity': 1});
}
);
});
$('.rounded').corners();
$('.gamebutton').each(function(i)
{
$(this).hover(function()
{
$('.gameTitlePopup').html($(this).attr('title'));
FadeActive();
});
});
function FadeActive()
{
$('.activeInfo').fadeIn('slow');
}
$('#gameInfoLeft').hover(function()
{
$(this).removeClass('activeInfo');
$(this).fadeOut('slow', function()
{
$('#gameInfoRight').addClass('activeInfo');
FadeActive();
});
});
$('#gameInfoRight').hover(function()
{
$(this).removeClass('activeInfo');
$(this).fadeOut('slow', function()
{
$('#gameInfoLeft').addClass('activeInfo');
FadeActive();
});
});
});
</script>
助けてくれてありがとう:)。
編集：私の要点を繰り返します。情報ボックスを移動した後にのみ動作が遅くなる理由を知りたいです。この前は、すべてがまったく問題ありません。ボックスを移動した後 (および元に戻した後)、UI が非常に遅くなります。