cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan kesan tetingkap gelongsor meniru perubahan tetikus pada halaman utama Microsoft_jquery

jQuery melaksanakan kesan tetingkap gelongsor meniru perubahan tetikus pada halaman utama Microsoft_jquery

WBOY
WBOYasal
2016-05-16 15:37:231289semak imbas

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.

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：JS menyedari kemahiran penukaran klik tab menegak mudah biru muda effect_javascriptArtikel seterusnya：JS menyedari kemahiran penukaran klik tab menegak mudah biru muda effect_javascript

Artikel berkaitan

Lihat lagi