Of Stack

jQuery realized the method of daily weather report imitating Tencent Microblog sliding effect

  • 2020-06-07 04:01:43
  • OfStack

This paper gives an example of jQuery's method to report the daily weather according to the sliding effect of Tencent Weibo. Share to everybody for everybody reference. The specific analysis is as follows:

This is the daily weather code imitating Tencent Weibo sliding effect. When the mouse is placed on it, the weather content will slide out from left to right, just like opening a drawer. The animation effect is smooth, of course, thanks to 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> A copy of Tencent weibo's daily weather effects </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> shenzhen </a></strong>
  </div><!--weather_main-->
  <div class="alert">
   <p> If the clouds know, how to cool the wind to accompany ~</p>
 <p><a> Remind friends </a></p>
  </div>
 </div><!--weather box-->
</body>
</html>

Hopefully, this article has been helpful in your jQuery programming.

Related articles: