Contoh dalam artikel ini menerangkan pelaksanaan jQuery terhadap kesan tetingkap gelongsor yang meniru halaman utama Microsoft dan merasakan perubahan tetikus. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah tetingkap gelongsor jQuery yang meniru laman utama Microsoft dan merasakan perubahan tetikus Selepas tetikus diletakkan, tetingkap akan terbentang ke kiri dan kembali ke keadaan asalnya selepas tetikus dialih keluar Laman web Microsoft Selepas melihat kod itu, saya rasa mudah untuk menanggalkannya dan tidak berani menyimpannya sendiri.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/
Kod khusus adalah seperti berikut:
<!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>
<title>jQuery仿微软首页感应鼠标变化的滑动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.box{width:100px;height:100px;position:absolute;right:0;color:#fff;}
.box1{top:100px;background:#000;}
.box2{top:250px;background:#333;}
.box3{top:400px;background:#666;}
.box4{top:550px;background:#999;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<body>
<div class="box box1">应用</div>
<div class="box box2">下载</div>
<div class="box box3">Windows Phone</div>
<div class="box box4">Office</div>
<script type="text/javascript">
$('.box').each(function(){
$(this).hover(function(){
$(this).stop().animate({width:'150'},1000);
},function(){
$(this).stop().animate({width:'100'},1000);
});
});
</script>
</body>
</html>Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
