recherche

Maison >interface Web >js tutoriel >Comment imiter l'effet coulissant de Tencent Weibo en utilisant jQuery pour signaler la météo quotidienne

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

PHPz
PHPzoriginal
2016-05-16 15:59:581203parcourir

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>

【Recommandations du didacticiel associées】

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Javascript implémente du code pour vérifier l'adresse IP et d'autres compétences information_javascript associéesArticle suivant：Javascript implémente du code pour vérifier l'adresse IP et d'autres compétences information_javascript associées

Articles Liés

Voir plus