最新消息:

第65款插件:jquery.weather.build.js制作出属于自己的天气

天气插件 杨红伟 21766浏览 0评论

简介:jquery.weather.build.js是一个开源的、基于jQuery 函数库的 JavaScript 天气预报脚本插件。 代码语法完全符合W3C网页标准,完全兼容各种主流浏览器。本插件主要用于天气预报的展示。本身的插件是:jquery.weather.js。但是作者 进行了封装,使得这个插件更好用了!但是这个插件依赖于jquery.weather.js,也就是说这两个插件得放在同一个位置,但是修改时只需要修改 jquery.weather.build.js相应的参数即可!和普通的插件方式有些不太一样。还有,点击天气显示出当地的天气状况!
注意:目录下的内容一定要完整!
图片:

11

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://julying.com/lab/weather/   作者:王子墨
官方打包文件:
http://www.ijquery.cn/study/demo/weather/jquery.weather.v3.source.rar
JS下载:
http://www.ijquery.cn/js/weather/jquery.weather.build.js
依赖JS:http://www.ijquery.cn/js/weather/jquery.weather.js
预览:http://www.ijquery.cn/study/demo/weather
打包下载:http://www.ijquery.cn/study/demo/weather/weather.zip

参数说明:

parentbox         : '.demo' ,        //父级容器  ,支持 jQuery/css3 选择器
moveArea         : 'limit', // 默认移动范围 all : 全屏幕 ,  limit : 只在父级中移动
zIndex                 : 1, // css 的 z轴高低。数字越大,层级越高
move                 : 1, // 是否移动 : 1 , 0
style                 : 'default',  //有 7 中类型  blue、cartoon-1、cartoon-2、cartoon-3、default、medialoot、meteocons
styleSize         : '' ,        // 天气图标大小 , big , small ; 其中 空值 = big
area                 : 'client', // 天气地区的方式,client: 根据用户地区判断, assign:固定显示一个地区的天气
city                : '', //可以指定城市。支持 encodeURI 编码 , 和 中文汉字,
styles                : ['blue','cartoon-1','cartoon-2','cartoon-3','default','medialoot','meteocons'] //共有那些样式模板

JS代码:

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.weather.build.js"></script>

[/js]

 

HTML代码:

[html]

<div style="margin-top:100px;">
<div id="weather"></div>
</div>

[/html]

 

CSS代码:

[css]

<link href="css/main.css" rel="stylesheet" rel="stylesheet" type="text/css">

[/css]

就这么几行代码,但目录下的JS文件,CSS文件和图片文件一项都不能缺!

当然了,不要单击弹出相应的天气,也可以实现,将来有时间做一做吧。今天就到了这里了,不早了,该睡了!

 

与本文相关的文章

  • 暂无相关文章!

Warning: Use of undefined constant PRC - assumed 'PRC' (this will throw an Error in a future version of PHP) in /www/wwwroot/www.ijquery.cn/wp-content/themes/d8-3.0/comments.php on line 17
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址