Home > Article > Web Front-end > jQuery实现仿腾讯微博滑出效果报告每日天气的方法

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

PHPzOriginal: 2016-05-16 15:59:581112browse

这篇文章主要介绍了jQuery实现仿腾讯微博滑出效果报告每日天气的方法,涉及jQuery鼠标事件及css样式操作技巧,需要的朋友可以参考下

这是仿腾讯微博滑出效果的每日天气代码，鼠标放上去，天气内容将从左向右滑出来，像开抽屉一样，本动画效果流畅，当然少不了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>
 <p class="weather">
  <p class="weather_main">
   <strong><a>深圳</a></strong>
  </p><!--weather_main-->
  <p class="alert">
   <p>如果云知道，多想凉风来做伴~</p>
 <p><a>提醒好友</a></p>
  </p>
 </p><!--weather box-->
</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript实现验证IP地址等相关信息代码_javascript技巧Next article：AngularJS基础学习笔记之简单介绍_AngularJS

See more

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

Related articles