suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie Animationseffekte und Rückruffunktionen

So implementieren Sie Animationseffekte und Rückruffunktionen

亚连
亚连Original
2018-06-15 11:37:152534Durchsuche

Jetzt werde ich Ihnen ein Beispiel für CSS3 in Kombination mit jQuery vorstellen, um Animationseffekte und Rückruffunktionen zu erzielen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Im Abschlussprojekt schlug ein Freund eine Idee vor, einen Spezialeffekt zur Begrüßung des Benutzers, wenn sich der Benutzer erfolgreich anmeldet, d. h. die Willkommensnachricht des Benutzers steigt von unten auf die Seite und kehrt dann zu zurück der Boden.

Das Problem, auf das er gestoßen ist, ist: Eine sofortige Nachricht kann von unten herauskommen, aber nachdem sie herausgekommen ist, kann er nicht mehr nach unten gehen.

Nachdem ich das gehört hatte, dachte ich darüber nach und dachte darüber nach, eine Rückruffunktion zu verwenden, um diesen Fehler zu beheben. Dann simulierte ich das Aufrufen der Homepage (d. h. das Aktualisieren der Seite), wenn die Anmeldung erfolgreich war, die Willkommensnachricht angezeigt wurde verschwindet, und ich habe einen ähnlichen Animationseffekt geschrieben. Nur als Referenz:

Rendering:

Der Code lautet wie folgt : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>欢迎动画</title>
		<style>
		 	*{margin:0;padding:0;}
		 	p {
		 		margin:0 auto;
		 		width:100%;
		 		height:700px;
		 		overflow:hidden;
		 		position:relative;
		 	}			
		 	p {
				width:220px;
				height:40px;
				line-height:40px;
				text-align:center;
				display:block;color:#900;
				background:#ccc;
				position:absolute;
				bottom:-40px;
				left:500px;
		 	}
		</style>
	</head>
	<body>
		<p>
			<p>欢迎xxx登录，祝您购物愉快</p>
		</p>
		
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});
			
			 	});
			}
		</script>
	</body>
</html>

Hier verwenden wir hauptsächlich die Animationsanimationseigenschaft in CSS3 in Kombination mit jQuery, um die Zeit und Richtung der Animationsausführung zu erkennen, und legen schließlich die Rückruffunktion fest, an die die Eingabeaufforderungsinformationen zurückgegeben werden sollen die Ausgangsposition.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie die ES6-Syntax in Node (ausführliches Tutorial)

So konfigurieren Sie Sass im Vue-Gerüst

Verwenden Sie Nodejs, um eine Verbindung zu MySQL herzustellen und grundlegende Vorgänge zu implementieren

So implementieren Sie die HTML-Attributbindung in Angular4

So schreiben Sie die Multiplikationstabelle mit JS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Animationseffekte und Rückruffunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.jsNächster Artikel：So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js

In Verbindung stehende Artikel

Mehr sehen