Heim > Web-Frontend > js-Tutorial > Hauptteil

C3+jQuery erstellt Animationseffekte und Rückruffunktionen

php中世界最好的语言
Freigeben: 2018-03-15 13:25:59
Original
1853 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen C3+jQuery zum Erstellen von Animationseffekten und Rückruffunktionen. Was sind die Vorsichtsmaßnahmen für C3+jQuery zum Erstellen von Animationseffekten und Rückruffunktionen? Werfen wir einen Blick auf praktische Fälle.

Im letzten Projekt habe ich eine von einem Freund vorgeschlagene Idee geschrieben. Wenn sich der Benutzer erfolgreich anmeldet, gibt es einen besonderen Effekt, um den Benutzer zu begrüßen steigt von unten zur Seite und kehrt dann nach unten zurück.

Das Problem, auf das er gestoßen ist, ist: Eine prompte Nachricht kann von unten herauskommen, aber wenn sie einmal herauskommt, kann sie 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:

C3+jQuery erstellt Animationseffekte und Rückruffunktionen

Der Code lautet wie folgt :

nbsp;html>

	
		<meta>
		<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>
	
	
		<p>
			</p><p>欢迎xxx登录,祝您购物愉快</p>
				
		<script></script>
		<script>
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});			
			 	});
			}
		</script>
	
Nach dem Login kopieren

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, um die Eingabeaufforderung zurückzugeben Informationen zur Ausgangsposition.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

HTML+CSS+jQuery zur Implementierung von Karussell-Werbebildern

JS zur Implementierung der Positionierungsnavigationsleiste

So erstellen Sie einen Paging-Effekt mit jquery

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

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!