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
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Berapakah nilai Dimensity 9000 bersamaan dengan Snapdragon?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
