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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
EsLint入门学习教程
Feb 17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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仿盗链代码
2012/06/03 PHP
destoon常用的安全设置概述
2014/06/21 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
css样式标签和js语法属性区别
2013/11/06 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python中的代码编码格式转换问题
2015/06/10 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
对python3新增的byte类型详解
2018/12/04 Python
解决yum对python依赖版本问题
2019/07/05 Python
python实现最大优先队列
2019/08/29 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
绩效专员岗位职责
2013/12/02 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
厨师长岗位职责
2014/03/02 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
无保留意见审计报告
2015/06/05 职场文书