Question

我的网站遇到了很多麻烦，从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的处理能力产生影响？

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

谢谢

Answer 1

这是关于如何使用javascript生成云的另一个很好的例子，它可能比你采取的方法更稳定： Creating Animated Moving Clouds using HTML5

以下是现场演示：Demo

我希望有所帮助。

jquery'pan'崩溃ios safari iphone 4是正常的吗？

1 个答案: