0

我的网站遇到了很多麻烦，并从 CSS 过渡到 Jquery 'pan' 效果，以制作云在天空中移动的效果。

我正在使用的代码是这个

<!-- 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 Safari 中运行该站点时，它会在大约 5 分钟后崩溃。

我的脚本是否有问题导致它崩溃？

我是否将某些事情过度复杂化并完成了可以以更简单、更移动友好的方式完成的事情？

动画的像素数量是否会影响 iPhone 的处理能力？

任何人都可以将他们的专业知识用于这个问题，因为我无法理解它，任何建议，即使这意味着对替代方法的改进，将不胜感激。

谢谢

4

1 回答 1

1

这是关于如何使用 javascript 生成云的另一个很好的示例，它可能会比您采用的方法更稳定： 使用 HTML5 创建动画移动云

这是现场演示：演示

我希望这会有所帮助。

于 2013-02-27T14:56:14.857 回答