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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 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分页显示制作详细讲解
2006/12/05 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
vue一步步实现alert功能
2017/07/05 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python操作gitlab API过程解析
2019/12/27 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
信息管理员岗位职责
2013/12/01 职场文书
学校读书活动总结
2014/06/30 职场文书
土地租赁意向书
2014/07/30 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
公司庆典欢迎词
2015/01/26 职场文书
golang 实现并发求和
2021/05/08 Golang
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏