jQuery 浮云天气预报插件 (jQuery Clouds Weather Plus)

例子： 天气效果

所需的文件调用 代码:

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/jquery.weather.cartoon.js"></script>
<link href="css/main.css" rel="stylesheet" media="all" />

阴天

html 代码:

<div class="weather1"></div>

javascript 代码:

$('.weather1').julyingWather({sky:'cloudy',imgPath:'images/'});

晴天

html 代码:

<div class="weather2"></div>

javascript 代码:

$('.weather2').julyingWather({sky:'sunshine',fps:0.1,duration:2000,imgPath:'images/'});

多云

html 代码:

<div class="weather3"></div>

javascript 代码:

$('.weather3').julyingWather({sky:'cloudys',fps:40,imgPath:'images/'});

下雨天 (鼠标悬停在上面，看看下雨的效果)

html 代码:

<div class="weather4"></div>

javascript 代码:

$('.weather4').julyingWather({sky:'rain',imgPath:'images/'});

下雪天 (鼠标悬停在上面，看看下雪的效果)

html 代码:

<div class="weather5"></div>

javascript 代码:

$('.weather5').julyingWather({sky:'snow',imgPath:'images/'});

例子：根据客户端IP，自动获取天气预报 (从中央气象局获取数据)

所需的文件调用 代码:

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/jquery.cookies.js"></script>
<script type="text/javascript" src="js/jquery.weather.cartoon.js"></script>
<link href="css/main.css" rel="stylesheet" media="all" />

您所在地区的天气

获取天气数据的 php 代码: (getWeather.php)

<?php
     header("content-type: text/html");
     $url = 'http://m.weather.com.cn/data/';
     $id = $_GET['id'];
     $data = file_get_contents($url . $id .'.html');
     echo $data;
?>

html 代码:

<div id="myWeather"></div>

javascript 代码:

$.getSky(function(){
     $('#myWeather').julyingWather({sky:getSky,imgPath:'images/'});
});

一句话调用 (适合新手) /适合个人博客、个人主页中插入

所需的文件调用 代码:（将下面这段代码加在网页的任何一个地方都可以。[尽可能头部模板、或者尾部模板]）

 

 

如果您网页中没有调用 jQuery 函数库、或者你不知道我在说什么，请用下面代码

<script type="text/javascript" src="http://julying.com/lab/weather/get/"></script>

 

如果您网页中已经调用了 jQuery 函数库，请用下面代码

<script type="text/javascript" src="http://julying.com/lab/weather/get/?jquery=false"></script>

 

如果您网页中已经调用了 jQuery 函数库，并且想让天气固定在特定位置现实，请用下面代码

比如，需要在<div id="myWeather"></div>内部区域显示，就：

<script type="text/javascript" src="http://julying.com/lab/weather/get/?jquery=false&parentid=myWeather"></script>