cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk meniru kesan slaid keluar Tencent Weibo menggunakan jQuery untuk melaporkan cuaca harian

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

PHPz
PHPzasal
2016-05-16 15:59:581203semak imbas

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>

【Cadangan Tutorial Berkaitan】

1 Tutorial Video JavaScript
2 Manual3.
tutorial bootstrap

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Javascript melaksanakan kod untuk mengesahkan alamat IP dan kemahiran information_javascript lain yang berkaitanArtikel seterusnya：Javascript melaksanakan kod untuk mengesahkan alamat IP dan kemahiran information_javascript lain yang berkaitan

Artikel berkaitan

Lihat lagi