suchen

Heim >Web-Frontend >js-Tutorial >jQuery steuert die DIV-Ebene, um Animationsänderungen von groß nach klein, von fern nach nah zu erreichen

jQuery steuert die DIV-Ebene, um Animationsänderungen von groß nach klein, von fern nach nah zu erreichen

PHP中文网
PHP中文网Original
2016-05-16 15:37:091544Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery die DIV-Ebene steuert, um Animationsänderungen von groß nach klein, von fern nach nah zu erreichen. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Hier ist ein kleines Beispiel dafür, wie jQuery den Animationseffekt von DIV von groß nach klein, von fern nach nah steuert und jQuery zum Generieren von Animationseffekten verwendet.

Der Screenshot des Laufeffekts lautet wie folgt:

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>Panel控制Div运动，由大到小变化。</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 type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
 $("#panel").css("opacity", "0.5");//设置不透明度
 $("#panel").click(function(){
  $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
   .animate({top: "200px" , width :"200px"}, 3000 ,function(){
    $(this).css("border","5px solid blue");
  })
 });
 });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

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：Eine ausführliche Diskussion der funktionalen Javascript-Programmierung_Javascript-FähigkeitenNächster Artikel：Eine ausführliche Diskussion der funktionalen Javascript-Programmierung_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen