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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
浅谈vue项目如何打包扔向服务器
May 08 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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设计模式 Visitor 访问者模式
2011/06/28 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
开始着手第一个Django项目
2015/07/15 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python多进程编程常用方法解析
2020/03/26 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
地道战观后感500字
2015/06/04 职场文书
户外拓展训练感想
2015/08/07 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
微信小程序基础教程之echart的使用
2021/06/01 Javascript