クリスマス メリー クリスマスは、jquery_jquery に基づいてブログにロマンチックな雪の効果を追加します

毎年恒例のクリスマスがまたやって来ます。まず、皆様の一年のご多幸とご健康、そして永遠の平和をお祈り申し上げます。この特別な日は、いたるところでお祭りの雰囲気が漂い、空に降る雪の結晶がさらにロマンチックな雰囲気を醸し出します。今日は、ブログに渦巻く雪のエフェクトを追加する方法を説明します。今日あなたがいるところでは雪が降っていますか？

まず、次のページで jQuery ライブラリと jQuery.snow.js (または圧縮バージョンの jQuery.snow.min.js を使用) を紹介します:

コードをコピーします コードは次のとおりです。

<script src="jquery.js"></script> <script src="jquery .snow.js"></script>

Blog Park 自体がすでに jQuery を導入しているため、Blog Park の友人は jQuery を導入する必要はありません。ブログ ガーデンに参加していない友人も、Google CDN が提供する jQuery を使用できます:

コードをコピー コードは次のとおりです。

<スクリプト src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> ;script src="jquery.snow.js"></script>


次に、ページ ドキュメント内の任意の場所で Snow プラグインを呼び出します:

コードをコピーします コードは次のとおりです。

<script>

$(document).ready( function() {
$.fn.snow( );
});
</script>


独自の設定に従って降雪効果を設定します:

コードをコピー コードは次のとおりです:

minSize /* 雪の結晶の最小サイズ、デフォルト値は 10 */

maxSize / * 雪の結晶の最小サイズ、デフォルト値は 20 */
newOn /* ミリ秒あたりに表示される雪の結晶の頻度、デフォルト値は 500 */
flakeColor /* 雪の結晶の色、デフォルト値は白 #FFFFFF */


たとえば、次の形式でパラメータを渡すことができます:

コードをコピーします コードは次のとおりです:

$.fn.snow({

minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#0099FF'
});


newOn ただし、パラメータ値が小さいほど効果は高くなります。設定が小さすぎると、パフォーマンスの問題が発生する可能性があり、より多くのリソースを消費します。

最後に、この雪の効果を実現するための重要なポイントを簡単に紹介します
: 文字 ❄ を雪の結晶として使用します。 Unicode エンコードは ❄ です。スノーフレークのサイズと色のコントロールは、実際には font-size と color プロパティを設定します。 setInterval を使用して雪の結晶を定期的に生成し、newOn を使用して頻度を制御します。


以下は Snow プラグインの完全なコードです
:

コードをコピーします コードは次のとおりです:

(function($){

$.fn.snow = function(options){
var $flake = $('<div id="フレーク" /> ').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(ドキュメント)。 height()、
documentWidth = $(document).width()、
defaults = {
minSize : 10、
maxSize : 20、
newOn : 500、
flakeColor : "#FFFFFF"
} ,
options = $.extend({},defaults, options);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100、
startOpacity = 0.5 Math.random()、
sizeFlake = options.minSize Math.random() * options.maxSize、
endPositionTop = documentHeight - 40、
endPositionLeft = startPositionLeft - 100 Math.random() * 200 ,
durationFall = documentHeight * 10 Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}
)
.animate(
{
上: endPositionTop,
左: endPositionLeft,
不透明度: 0.2
},
durationFall,
'linear',
function( ) {
$(this ).remove()
}
);
})(jQuery); 🎜>
庭にいる友達は、次のコードを (管理 -> 設定 -> フッター HTML コード) に追加するだけです。これは簡単ではありません。

注意事項: エスケープされるため、ここでスノーフレークのエンコーディングにスペースを追加してください。HTML('& #10052; 内の & # の間のスペースを削除することを忘れないでください。 ') 。

コードをコピー コードは次のとおりです。

<script> ($) {$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top' :'- 50px'}).html('& #10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20 ,newOn: 500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity =0.5 Math .random(),sizeFlake=options.minSize Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100 Math.random()*200,durationFall=documentHeight*10 Math.random ()* 5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top :endPositionTop, left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); >$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' });