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程序设计有所帮助。

(0)

相关推荐

  • newtonsoft.json解析天气数据出错解决方法

    今天用NewtonSoft.JSon解析一个天气数据,数据格式如: 复制代码 代码如下: {"status":1,"detail":"\u6570\u636e\u83b7\u53d6\u6210\u529f","data":[[{"date":"2014-01-01","dis_id":"1119","dis_name":&qu

  • JS HTML5 音乐天气播放器(Ajax获取天气信息)

    晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条

  • 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

  • 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&

  • 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

  • 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",        

  • 用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

  • jquery和雅虎的yql服务实现天气预报服务示例

    本代码不涉及任何后端开发代码(如.Net,JAVA等).目前最权威的天气预报数据是中国天气网(http://www.weather.com.cn/),因为这个是官方提供的气象数据,除了商业的增值服务外,还提供了免费的以JSON数据格式返回的气象数据,以查看杭州的天气数据为例,可以输入以下地址:http://m.weather.com.cn/data/101210101.html ,返回的JSON数据格式如下图: YQL服务可以实现对网上不同数据源的query,filter,combine(查询,

  • 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> </

随机推荐