jQuery实现仿腾讯微博滑出效果报告每日天气的方法


Posted in Javascript onMay 11, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 #Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 #Javascript
javascript中this的四种用法
May 11 #Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
JS+CSS实现的拖动分页效果实例
May 11 #Javascript
浅谈jQuery构造函数分析
May 11 #Javascript
You might like
让PHP支持断点续传的源码
2010/05/16 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
原生js实现日历效果
2020/03/02 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
django云端留言板实例详解
2019/07/22 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Linux开机引导的步骤是什么
2014/02/26 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
小学教师节活动方案
2014/01/31 职场文书
档案信息化建设方案
2014/05/16 职场文书
公务员诚信承诺书
2014/05/26 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
python 网络编程要点总结
2021/06/18 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技