jquery实现天气预报麻烦吧html和css也带上

这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式，包括下雨，闪电，白天，夜间和下雪。卡片使用扁平化风格，并使用CSS3帧动画来制作各种动画效果。

成都创新互联公司是一家专注于成都网站建设、成都网站设计与策划设计,大冶网站建设哪家好?成都创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:大冶等地区。大冶做网站价格咨询:18980820575

制作方法

HTML结构

该特效的HTML结构采用无序列表的HTML结构，其中每一个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中调用天气预报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怎么用

只需在网站添加并引用jquery.simpleWeather.js。然后初始化simpleWeather，设置WOEID，美国邮递区号或位置，添加一个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调用天气预报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文件，返回的数组根据你的需要操作。

文章名称：jquery天气,jquery天气预报插件
本文链接：http://kswjz.com/article/dsdsjsd.html