建站
咨詢
售后
建站咨詢
新聞中心
jquery實現(xiàn)天氣預報麻煩吧html和css也帶上
這是一款非常有意思的純CSS3扁平風格天氣預報卡片動畫特效。該天氣預報特效將各種天氣制作為卡片形式，包括下雨，閃電，白天，夜間和下雪?？ㄆ褂帽馄交L格，并使用CSS3幀動畫來制作各種動畫效果。
成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設、成都網(wǎng)站設計與策劃設計,大冶網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:大冶等地區(qū)。大冶做網(wǎng)站價格咨詢:18980820575
制作方法
HTML結(jié)構(gòu)
該特效的HTML結(jié)構(gòu)采用無序列表的HTML結(jié)構(gòu)，其中每一個li.card元素代表一種卡片。
ul class="card-list"
li class="card"
div class="card-color color-rain"
div class="rain"/div
/div
div class="card-info"
p63 ℉/p
plow of 61 ℉/p
/div
/li
......
/ul
復制代碼
CSS樣式
首先給卡片一些基本樣式。
.card {
jquery中調(diào)用天氣預報API（ajax）
$.getScript('',?function(_result)?{
if?(remote_ip_info.ret?==?'1')?{
$.ajax({
type:?"GET",
url:?""+remote_ip_info.city,
data:?"",
success:?function(msg){
console.log(msg);
}
});
}
});
jquery.simpleweather.js怎么用
只需在網(wǎng)站添加并引用jquery.simpleWeather.js。然后初始化simpleWeather，設置WOEID，美國郵遞區(qū)號或位置，添加一個div與``天氣的ID（或任何想要的，只是改變它在init）。
!--html--
div id="weather"/div
/*---css---*/
body {
font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: #0091c2;
}
#weather {
width: 425px;
margin: 0px auto;
text-align: center;
text-transform: uppercase;
}
#weather h2 {
margin: 0 0 8px;
color: #fff;
font-size: 150px;
font-weight: 300;
text-align: center;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather ul {
margin: 0;
padding: 0;
}
#weather li {
background: #fff;
background: rgba(255,255,255,0.90);
padding: 20px;
display: inline-block;
border-radius: 5px;
}
#weather .currently {
margin: 0 20px;
}
//----js
$(document).ready(function() {
$.simpleWeather({
zipcode: '',
woeid: '2357536',
location: '',
unit: 'f',
success: function(weather) {
html = 'h2'+weather.temp+'°'+weather.units.temp+'/h2';
html += 'ulli'+weather.city+', '+weather.region+'/li';
html += 'li class="currently"'+weather.currently+'/li';
html += 'li'+weather.tempAlt+'°C/li/ul';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('p'+error+'/p');
}
});
});
用Jquery調(diào)用天氣預報API
$.getScript('', function(_result) {
if (remote_ip_info.ret == '1') {
$.ajax({
type: "GET",
url: ""+remote_ip_info.city,
data: "",
success: function(msg){
console.log(msg);
}
});
}
});
如何利用jquery+json制作天氣預報
用$.ajax的jsonp方法請求外部提供的天氣預報json文件，返回的數(shù)組根據(jù)你的需要操作。
網(wǎng)站欄目：jquery天氣,jquery天氣預報插件
本文URL：http://www.dlmjj.cn/article/dsdsjsd.html
