前回の記事では、企業のウェブサイトのソースコードを公開しました。この記事では、Jquery に関する知識を補完します。Jquery は、Protype と似た JavaScript 開発フレームワークであり、非常に軽量です。CG などのプログラマーに大変人気があります。もちろん、Jquery を使用してダイナミックな効果を実現することも簡単です。以下は、CG が Jquery を使用して実現したシンプルなダイナミックエフェクトです。JS コードが複雑に見えないように注意してください。
以下はデモのリンクです http://www.lidaren.com/code/Jquery/Jquery1.htm
以下はソースコードです
$(document).ready(function(){
$("#box").animate({opacity: "0.1", left: "+=600"}, 1200)
.animate({opacity: "1", top: "+=300", height: "170", width: "300"}, "slow")
.animate({opacity: "0.1", left: "0", height: "170", width: "300"}, "slow")
.animate({opacity: "1", top: "0"}, "fast")
.animate({opacity: "1", top: "+=150", left: "+=300", height: "170", width: "300"}, "slow")
.animate({opacity: "0.1", height: "170", width: "300"}, "slow")
.animate({opacity: "1" , height: "170", width: "300"}, "slow")
.animate({opacity: "0.4", height: "170", width: "300"}, "slow")
.animate({opacity: "1", height: "170", width: "300"}, "slow")
.slideUp()
.slideDown("slow")
.animate({opacity: "0.1", height: "170", width: "300"}, "slow")
.animate({opacity: "1" , height: "170", width: "300"}, "slow")
.animate({opacity: "0.4", height: "170", width: "300"}, "slow")
.animate({opacity: "1", height: "170", width: "300"}, "slow")
return false;
});
簡単に説明すると、Jquery は DOM オブジェクトのダイナミックエフェクトを実現するために、animate メソッドを定義しています。animate メソッドのパラメータは多岐にわたりますが、最初のパラメータはオブジェクトの A 状態から B 状態への基本的な属性の変化値です。通常、CSS と互換性があり、Jquery は式の計算機能をサポートしています。たとえば、height:"+=300" は高さを 300 増やすことを意味します。このような方法はコードの記述に便利です。2 番目の属性は通常、変化の効果を制御するためのもので、主に fast と slow の値が使用できます。もちろん、時間の長さを表す整数を使用することもできます。これにより、より自由に制御できます。以下は、.slideUp () と.slideDown () メソッドです。これらの効果はスライドアップとスライドダウンの効果です。パラメータには fast と slow、または時間制御を加えることができます。単位はミリ秒です。他にも.hide () と.show () がありますが、意味が分かると思いますので、ここでは詳しく説明しません。