Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung eines Schiebefenstereffekts, der die Homepage von Microsoft imitiert und Mausänderungen erkennt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein jQuery-Schiebefenster, das die Microsoft-Homepage nachahmt und Mausänderungen erkennt. Nachdem die Maus platziert wurde, wird das Fenster nach links gestreckt und kehrt in seinen ursprünglichen Zustand zurück, nachdem ich es auf der offiziellen Seite gefunden habe Nachdem ich mir den Code angesehen habe, fällt es mir leicht, ihn zu entfernen, und ich traue mich nicht, ihn für mich zu behalten.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/
Der spezifische Code lautet wie folgt:
<!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>Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
