suchen

Heim >Web-Frontend >js-Tutorial >So imitieren Sie den Slide-Out-Effekt von Tencent Weibo mithilfe von jQuery, um das tägliche Wetter zu melden

So imitieren Sie den Slide-Out-Effekt von Tencent Weibo mithilfe von jQuery, um das tägliche Wetter zu melden

PHPz
PHPzOriginal
2016-05-16 15:59:581203Durchsuche

Dieser Artikel stellt hauptsächlich die Methode von jQuery vor, den Slide-Out-Effekt von Tencent Weibo zu imitieren, um das tägliche Wetter zu melden, einschließlich jQuery-Mausereignissen und CSS-Bedienungskenntnissen. Freunde in Not können sich darauf beziehen

Dies ist ein Nachahmung des täglichen Wettercodes für den Tencent Weibo-Slide-Out-Effekt, und der Wetterinhalt wird von links nach rechts verschoben. Der Animationseffekt ist natürlich unverzichtbar Version 1.6.2 jQuery-Plugin, um diese Funktionalität zu erreichen. 

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

[Verwandte Tutorial-Empfehlungen]

1. JavaScript-Video-Tutorial
2. JavaScript Online Handbuch
3. Bootstrap-Tutorial

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript implementiert Code zur Überprüfung der IP-Adresse und anderer verwandter Informationen. Javascript-KenntnisseNächster Artikel：Javascript implementiert Code zur Überprüfung der IP-Adresse und anderer verwandter Informationen. Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen