jQuery实现仿腾讯微博滑出效果报告每日天气的方法
本文实例讲述了jQuery实现仿腾讯微博滑出效果报告每日天气的方法。分享给大家供大家参考。具体分析如下：
这是仿腾讯微博滑出效果的每日天气代码，鼠标放上去，天气内容将从左向右滑出来，像开抽屉一样，本动画效果流畅，当然少不了jQuery的功劳，本代码使用了1.6.2版本的jQuery插件来实现这一功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿腾讯微博的每日天气效果</title>
<style type="text/css">
.weather{
width:500px;height:100px;margin:0 auto;
position:relative;color:#fff;text-align:center;
overflow:hidden;
}
.weather_main{
width:99px;border-right:solid 1px #fff;
float:left;background:#F03;text-align:center;
position:relative;z-index:2;
}
.weather_main strong{
line-height:100px;
}
.weather_main strong a{
border-bottom:solid 2px #fff;cursor:pointer;
}
.alert{
width:400px;height:100px;position:absolute;
left:-400px;top:0;background:#F03;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".weather_main").hover(function(){
$(".alert").animate({left:"100px"},1000);
return false;
},function(){
$(".alert").animate({left:"-400px"},1000);
return false;
})
})
</script>
</head>
<body>
<div class="weather">
<div class="weather_main">
<strong><a>深圳</a></strong>
</div><!--weather_main-->
<div class="alert">
<p>如果云知道，多想凉风来做伴~</p>
<p><a>提醒好友</a></p>
</div>
</div><!--weather box-->
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
newtonsoft.json解析天气数据出错解决方法
今天用NewtonSoft.JSon解析一个天气数据,数据格式如: 复制代码 代码如下: {"status":1,"detail":"\u6570\u636e\u83b7\u53d6\u6210\u529f","data":[[{"date":"2014-01-01","dis_id":"1119","dis_name":&qu
-
Jquery获取当前城市的天气信息
本文实例为大家分享了Jquery获取当前城市的天气信息代码,供大家参考,具体内容如下 HTML代码: <div id="weather"></div> Jquery代码: function findWeather() { var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'; $.getScript(cityUrl, function(script, textSt
-
JS显示日历和天气的方法
本文实例讲述了JS显示日历和天气的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
用javascript为页面添加天气显示实现思路及代码
复制代码 代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <script> function load(cid) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHtt
-
asp下以Json获取中国天气网天气的代码
百度了一下,找了点别人的方法改进了一下. 获取天气网址:http://www.weather.com.cn/html/weather/101210701.shtml这里是温州的,当然其他城市自己搜索一下,换一下ID. 由于是写入cookies记录当天天气,所有需要在站点下浏览. js代码: 复制代码 代码如下: var Url=escape("http://m.weather.com.cn/data/101210701.html"); var COOKIE_info = "C
-
node.js 中国天气预报 简单实现
复制代码 代码如下: var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cookie = '你登录百度后的cookie' var options = { method: "GET", url: url, qs: { "type": "weather",
-
JS HTML5 音乐天气播放器(Ajax获取天气信息)
晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条
-
js获取新浪天气接口的实现代码
js获取新浪天气接口的实现代码 <!doctype html> <html class="no-js fixed-layout"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>天气</title> </
-
jquery和雅虎的yql服务实现天气预报服务示例
本代码不涉及任何后端开发代码(如.Net,JAVA等).目前最权威的天气预报数据是中国天气网(http://www.weather.com.cn/),因为这个是官方提供的气象数据,除了商业的增值服务外,还提供了免费的以JSON数据格式返回的气象数据,以查看杭州的天气数据为例,可以输入以下地址:http://m.weather.com.cn/data/101210101.html ,返回的JSON数据格式如下图: YQL服务可以实现对网上不同数据源的query,filter,combine(查询,
-
android调用国家气象局天气预报接口json数据格式解释
国家气象局提供了三种数据的形式 网址在: http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.html http://m.weather.com.cn/data/101010100.html 最后一种是解析最全面的. 数据解析格式: 第一个网址提供的json数据为: 复制代码 代码如下: {"weatherinfo":{"city&