Heim > Artikel > Web-Frontend > jQuery implementiert einen Schiebefenstereffekt, der den Mauswechsel auf der Microsoft-Homepage_jquery imitiert

jQuery implementiert einen Schiebefenstereffekt, der den Mauswechsel auf der Microsoft-Homepage_jquery imitiert

WBOYOriginal: 2016-05-16 15:37:231236Durchsuche

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS realisiert hellblaue einfache vertikale Tab-Klick-Umschalteffekte_Javascript-FähigkeitenNächster Artikel：JS realisiert hellblaue einfache vertikale Tab-Klick-Umschalteffekte_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen