Bagaimana untuk meniru kesan slaid keluar Tencent Weibo menggunakan jQuery untuk melaporkan cuaca harian-tutorial js-php.cn

Bagaimana untuk meniru kesan slaid keluar Tencent Weibo menggunakan jQuery untuk melaporkan cuaca harian

PHPz

Lepaskan： 2018-10-15 14:42:32

asal

1134 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kaedah jQuery untuk meniru kesan slaid keluar Tencent Weibo untuk melaporkan cuaca harian, yang melibatkan acara tetikus jQuery dan kemahiran operasi gaya css boleh merujuknya

Ini adalah tiruan Kod cuaca harian untuk kesan slaid keluar Tencent Weibo dan kandungan cuaca akan meluncur keluar dari kiri ke kanan, seperti membuka laci Sudah tentu, kod ini digunakan versi 1.6.2 pemalam jQuery untuk mencapai fungsi ini.

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

Salin selepas log masuk

【Cadangan Tutorial Berkaitan】

1 Tutorial Video JavaScript
2 Manual3.
tutorial bootstrap