Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie einen menüsensitiven Mausgleitanimationseffekt mit jQuery_jquery

So implementieren Sie einen menüsensitiven Mausgleitanimationseffekt mit jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:12:021129Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery menüsensitive Mausgleitanimationseffekte implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die Testumgebung für diesen Code ist IE9 und IE8 und niedrigere Browser unterstützen ihn möglicherweise nicht.

Dieser JS-Mausgleiteffekt verwendet jQuery, um eine einfache Animation zu erreichen, und ich war angenehm überrascht, dass jQuery über eine bessere Schreibmethode verfügt, die kontinuierlich geschrieben werden kann, bevor die Animationsmethode dies nach der Maus realisieren kann wird herausgefahren, nein Führen Sie dann den Schiebeeffekt aus.

Code kopieren Der Code lautet wie folgt:




Sehr guter JQuery-Maus-Gleiteffekt


body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; width:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,i{padding: 0;marge:0}
fieldset,img {border:0}
.clear{ clear:both;}
Adresse, Bildunterschrift, Zitat, Code, dfn, em, th, var {font-weight:normal;font-style:normal}
ol,ul {list-style:none}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-size:100%}
abbr,acronym,img {border:0}
button,input,select,textarea{font-size:100%;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
Tabelle {border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
a:hover {text-decoration:underline;}
.clearfix:after {visibility: versteckt;display: block;font-size: 0;content: ".";clear:both;}
.all ul{ width:100%; text-align:center;}
.all ul li{ width:100%; height:40px; border-bottom:1px dashed #990066;




  • Erstes Element

  • Zweites Element

  • Der dritte Punkt






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