0

我希望我的网站根据从雅虎的天气 api 接收到的天气数据显示 css 动画。到目前为止，为了测试这一点，我已经创建了一个云在屏幕上飘过的动画，但只希望它们在多云时显示。我有一段我认为应该可以工作的 JS，但我不确定如何基于此实现动画。

我认为我当前的云动画需要进入 'body.cloudy, body.mostly-cloudy, body.partly-cloudy{}' 但我不确定如何

下面是我的代码，我取出了一些 html（导航功能等）来缩短这个问题的代码。

我的 HTML：

  <body>

  <div class="container-fluid">



      <nav class="navbar navbar-default" style="z-index:2;">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
            <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
            <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
            <li><span class="searchIcon hidden-xs"></span></li>
            </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

    </div> <!-- /container -->

    <div class="sky">
      <div class="cloud cloud01"></div>
      <div class="cloud cloud02"></div>
      <div class="cloud cloud03"></div>
      <div class="cloud cloud04"></div>
      <div class="cloud cloud05"></div>
      <div class="cloud cloud06"></div>
    </div>

    <!-- /info menu -->
    <div class="information-menu">
    <!--menu items-->         
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/my-js.js"></script>
  </body>

JS

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0029'",function(data){
            var w=data.query.results.item;
            var class=w.condition.text;
            var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

            $('body').addClass(encodedclass);

       });

CSS

body{
  overflow: hidden;
  background-color: blue;
} 

.cloud {
  width: 512px;
  height: 512px;
  position: absolute;
}

.cloud01 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift 35s linear infinite;
}

.cloud02 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift02 35s linear infinite;
}

.cloud03 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift02 55s linear infinite;
}

.cloud04 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift 45s linear infinite;
}

.cloud05 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift 30s linear infinite;
}

.cloud06 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift02 25s linear infinite;
}
@keyframes drift {
  from {transform: translate(-150px,-550px);}
  to {transform: translate(350px, 550px);}
}

@keyframes drift02 {
  from {transform: translate(350px,-550px);}
  to {transform: translate(1050px, 550px);}
}

body.cloudy, body.partly-cloudy, body.mostly-cloudy {

}
4

1 回答 1

0

作为您评论中的错误消息，您可以尝试在下面编辑您的代码：

var _class=w.condition.text;
var encodedclass = _class.replace(/\s+/g, '-').toLowerCase();

let, class因为在严格模式下，现在浏览器根本不支持像 ES6 这样的关键字，并且您的浏览器会像您阅读的那样欺骗错误。

更新答案：

$('body').removeClass('party-cloud cloud mostly-cloud').addClass(encodedclass);

于 2016-02-25T16:17:06.683 回答