ホームページ  >  記事  >  ウェブフロントエンド  >  ブログ上の雪の結晶が画面を超えても表示されるようにする_jquery

ブログ上の雪の結晶が画面を超えても表示されるようにする_jquery

WBOY
WBOYオリジナル
2016-05-16 17:44:261046ブラウズ

先日、庭に雪の結晶を作ったブログの記事を拝見したので、早速ブログに載せてみましたが、言うまでもなくとても綺麗です。しかし、しばらく見てみると、そのページが特に引っかかっていることに気づきました。

コードを見てみると、オリジナルの作者は複数の小さな div の雪の結晶をボディに挿入し続け、ゆっくりと下に向かって浮かせた後、雪の結晶を削除していました。

でも、実際には画面の向こうにページは見えないので、雪の結晶が浮かんでいても意味はありません。
そこで、元のコードを少し変更して、(本体の下部ではなく) 画面の上部から画面の下部にのみ落ちるようにし、雪の結晶を削除して、雪の結晶の位置を固定に変更しました。

ページを更新したところ、さらに良くなりました。次に、変更したコードを投稿してみんなと共有します。
追記: オリジナルの作者へのリンクが見つかりませんでした。著作権はオリジナルの作者に帰属します:)

コードをコピーしてください コードは次のとおりです。

(function($){
$.fn.snow=function(options){
var $flake=$('< div />')
.css ({
'position':'fixed',//'absolute',
'top':'-50px',
'z-index' :'1000'
})
.html('❄');
var documentHeight=document.documentElement.clientHeight;//$(document).height(); (ドキュメント).width();
var デフォルト={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};
var options=$.extend({},defaults,オプション);
var interval=setInterval( function(){
var startPositionLeft=Math.random()*documentWidth-100;
var startOpacity=0.5 Math.random();
var sizeFlake= options.minSize Math.random()*options.maxSize;
var endPositionTop=startPositionLeft-100 Math.random()*200; .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();
}); //interval End
};// $.fn.snow End
})(jQuery);
$.fn.snow({ minSize: 10, maxSize: 60, newOn: 800, flakeColor: '#ccc'});

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。