suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert einen horizontalen Bewegungseffekt mit horizontaler Pufferung (mit Download des Demo-Quellcodes)_jquery

jQuery implementiert einen horizontalen Bewegungseffekt mit horizontaler Pufferung (mit Download des Demo-Quellcodes)_jquery

WBOY
WBOYOriginal
2016-05-16 15:17:001324Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung horizontaler Bewegungseffekte mit horizontaler Pufferung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JQuery wird hier verwendet, um horizontale gepufferte horizontale Bewegungen zu erzeugen, die durch Klicken mit der Maus aktiviert werden können. Nach dem Klicken können Sie sehen, dass sich die Div-Ebene horizontal bewegt, woraus viele andere Formen von Animationseffekten abgeleitet werden können.

Klicken Sie hier, um die Online-Demonstration anzusehen.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平移动</title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#panel").click(function(){
    $(this).animate({left: "500px"}, 3000);
  })
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung gängiger Klassiker Spezialeffekte von jQuery"

Ich hoffe, dass dieser Artikel allen in 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-Formatierungsbetrag und Bankkartennummer im Eingabefeld_Javascript-KenntnisseNächster Artikel：js-Formatierungsbetrag und Bankkartennummer im Eingabefeld_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen