我有一个网站在屏幕上播放云飘过的 CSS 动画。
然后我添加了一个从 Yahoo 的天气 api 中提取数据的 javascript 函数。我用它来根据天气改变背景颜色。我想要它，所以我现在拥有的云动画仅在多云时出现(也就是当 javascript 使 body 类为“body.cloudy”或“body.partly-cloudy”时)。
此刻云在 div 中，所以我想我需要制作它，以便如果 body 不是“body.cloudy”或“body.partly-cloudy”，则 div 会被隐藏，但我不是确定如何执行此操作。
<body>
<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>
</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
.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.unknown{
background-color: blue;
}
body.cloudy, body.partly-cloudy, body.mostly-cloudy {
background-color: red;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
background-color: blue;
}
body.sunny, body.fair, body.hot {
background-color: yellow;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
background-color: black;
}
最佳答案
我认为这个 CSS 可以做到这一点:
/* Hide the clouds by default */
body .cloud {
display: none;
}
/* Show them when it's cloudy or partly-cloudy */
body.cloudy .cloud, body.partly-cloudy .cloud {
display: block;
}
关于javascript - 如果使用某个类，则使用 javascript 隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35634307/