Heim > Web-Frontend > js-Tutorial > 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
Freigeben: 2016-05-16 15:17:00
Original
1346 Leute haben es durchsucht

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>

Nach dem Login kopieren

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage