0

私は自分のサイトで多くの問題を抱えており、CSS トランジションから Jquery の「パン」効果に移行して、空を横切る雲の効果を出しました。

私が使用しているコードはこれです

<!-- JAVASCRIPT LOADER -->

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.spritely-0.6.js" type="text/javascript"></script>



        <script type="text/javascript">
        $(document).ready(function() {
            $('#far-clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 30});
            $('#near-clouds').pan({fps: 30, speed: 1.3, dir: 'left', depth: 60});
          });
          </script>  



<!-- JAVASCRIPT LOADER -->

これをトリガーします。

<div class="clouds">
<div id="far-clouds" class="far-clouds stage"></div>
<div id="near-clouds" class="near-clouds stage"></div>
<div class="mainContent"> </div>

次のスタイルで

#sky {
margin: 0px;
background: url('img/bg.png');
max-height: 200px;
min-height: 150px;
height: 20%;
width:100%;
max-width: 1400px;
margin-bottom: -24px;
}

#clouds {
position: relative;
top:-50px;
}


    .stage {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-width:1400px;
        height:200px;
        overflow: hidden;
        z-index: 100;
    }


    .far-clouds { 
        background: transparent url(img/clouds/far-clouds.png) 1400px 255px repeat-x; 
        background-position-y: -15px;
        position: relative;
        top:-155px;
    }
    .near-clouds { 
        background: transparent url(img/clouds/near-clouds.png) 305px 255px repeat-x; 
        background-position-y: -15px;
        position: relative;
        top:-355px;
        z-index: 102;
    }

クロムには顕著な改善があり、処理能力は大幅に低下しています。ただし、iPhone 4 の iOS サファリでサイトを実行すると、約 5 分後にクラッシュします。

スクリプトにクラッシュの原因となる問題がありますか?

何かを過度に複雑にして、よりシンプルでモバイルに適した方法で実行できる何かを実行したことがありますか?

アニメートされているピクセルの量は、iPhone の処理能力に影響しますか?

私はそれを理解できないので、誰かがその専門知識を問題に貸してくれませんか.

ありがとう

4

1 に答える 1

1

これは、javascript を使用して雲を生成する方法に関する別の優れた例です。これは、あなたが取ったアプローチよりも安定していることが証明されるかもしれません: HTML5 を使用してアニメーション化された動く雲を作成する

ライブデモはこちら: Demo

それが役立つことを願っています。

于 2013-02-27T14:56:14.857 に答える