Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienne-js tutoriel-php.cn

Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienne

PHPz

Libérer： 2018-10-15 14:42:32

original

1193 Les gens l'ont consulté

Cet article présente principalement la méthode jQuery consistant à imiter l'effet coulissant de Tencent Weibo pour signaler la météo quotidienne, impliquant des événements de souris jQuery et des compétences opérationnelles de style CSS. Les amis dans le besoin peuvent s'y référer

Il s'agit d'un. imitation Code météo quotidien pour l'effet coulissant Tencent Weibo. Placez la souris dessus et le contenu météo glissera de gauche à droite, comme si vous ouvriez un tiroir. L'effet d'animation est fluide. Bien sûr, jQuery est indispensable. version 1.6.2 du plugin jQuery pour obtenir cette fonctionnalité.

<!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>

Copier après la connexion

【Recommandations du didacticiel associées】

1 Tutoriel vidéo JavaScript
2. Manuel3.
Tutoriel bootstrap