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

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

May 16, 2016 pm 05:44 PM
ブログ

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

コードを見てみると、オリジナルの作者は複数の小さな 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ゼロから始めて、Flask をインストールし、個人ブログを迅速に確立する方法を段階的にガイドします。 ゼロから始めて、Flask をインストールし、個人ブログを迅速に確立する方法を段階的にガイドします。 Feb 19, 2024 pm 04:01 PM

ゼロから始めて、Flask をインストールし、個人ブログをすぐに構築する方法を段階的に説明します。書くことが好きな人にとって、個人ブログを持つことは非常に重要です。軽量の Python Web フレームワークである Flask は、シンプルで完全に機能する個人ブログを迅速に構築するのに役立ちます。この記事では、ゼロから始めて、Flask をインストールして個人ブログを迅速に構築する方法を段階的に説明します。ステップ 1: Python と pip をインストールする 開始する前に、まず Python と pi をインストールする必要があります

2022 年のオープンソース PHP ブログ システムのトップ 10 は何ですか? 【推薦する】 2022 年のオープンソース PHP ブログ システムのトップ 10 は何ですか? 【推薦する】 Jul 27, 2022 pm 05:38 PM

ブログとは、ウェログ、ブログ、ブログとも訳され、通常は個人によって運営され、随時新しい記事が投稿されるウェブサイトです。では、どうやってブログを開設すればいいのでしょうか? PHP ブログ システムとは何ですか?どのブログ システムを使用するのが最適ですか?以下の PHP 中国語 Web サイトでは、トップ 10 のオープンソース PHP ブログ システムを要約して共有します。

シンプルなブログを作成する: PHP と SQLite を使用する シンプルなブログを作成する: PHP と SQLite を使用する Jun 21, 2023 pm 01:23 PM

インターネットの発展に伴い、ブログはますます多くの人々が自分の生活、知識、アイデアを共有するプラットフォームになりました。自分のブログも作成したい場合は、この記事で PHP と SQLite を使用して簡単なブログを作成する方法を紹介します。ニーズを決定する ブログを作成し始める前に、実現したい機能を決定する必要があります。例: ブログ投稿の作成 ブログ投稿の編集 ブログ投稿の削除 ブログ投稿のリストの表示 ブログ投稿の詳細の表示 ユーザー認証と権限制御 PHP と SQLite のインストール PHP と S をインストールする必要があります

Python Django フレームワークを使用してブログ Web サイトを構築する Python Django フレームワークを使用してブログ Web サイトを構築する Jun 17, 2023 pm 03:37 PM

インターネットの普及に伴い、ブログは情報の普及とコミュニケーションにおいてますます重要な役割を果たしています。このような状況で、ますます多くの人が自分のブログ サイトを構築し始めています。この記事では、PythonDjango フレームワークを使用して独自のブログ Web サイトを構築する方法を紹介します。 1. PythonDjango フレームワークの概要 PythonDjango は、Web アプリケーションを迅速に開発するために使用できる無料のオープンソース Web フレームワークです。このフレームワークは、開発者が豊富な機能を構築できる強力なツールを提供します。

PHPを使った簡単なブログの作り方 PHPを使った簡単なブログの作り方 Sep 24, 2023 am 08:25 AM

PHP を使用して簡単なブログを作成する方法 1. はじめに インターネットの急速な発展に伴い、ブログは人々が経験を共有し、生活を記録し、意見を表現するための重要な方法となっています。この記事では、PHPを使って簡単なブログを作成する方法を、具体的なコード例とともに紹介します。 2. 準備 開始する前に、次の開発環境が必要です: PHP インタプリタと Web サーバー (Apache など) がインストールされたコンピュータ、MySQL などのデータベース管理システム、テキスト エディタまたは IDE3

ブログの作り方 ブログの作り方 Oct 10, 2023 am 09:46 AM

ブログを作成するには、ブログのトピックと対象読者の決定、適切なブログ プラットフォームの選択、ドメイン名の登録とホスティングの購入、ブログの外観とレイアウトのデザイン、高品質のコンテンツの作成、ブログの宣伝、分析と分析を行います。それを改善することです。

CentOS でブログをインストールして構築するための完全なガイド CentOS でブログをインストールして構築するための完全なガイド Feb 14, 2024 pm 08:27 PM

この記事では、必要なソフトウェアのインストール、設定、基本的な使用方法など、CentOS システムにブログをインストールして構築する方法を詳しく紹介し、記事の最後に Linux の知識を少し共有します。インターネット技術の継続的な発展に伴い、ブログを使用して自分の生活を記録し、知識を共有することを選択する人が増えています。人気のある Linux ディストリビューションとして、CentOS は安定性と安全性が高く、ブログの構築に適しています。この記事では、手順の詳細を紹介します。 CentOS でのブログのインストールと設定について説明します。インストール前の準備 1. CentOS オペレーティング システムがインストールされており、インターネットに接続できることを確認します。 2. Linux コマンドライン操作の基本的な知識がある。 Apache サーバーのインストール 1. ターミナルを開き、次のコマンドを使用します。

Croogo フレームワークでブログ開発を実装するにはどうすればよいですか? Croogo フレームワークでブログ開発を実装するにはどうすればよいですか? Jun 03, 2023 pm 03:51 PM

Croogo フレームワークは、開発者が Web サイトの機能と外観をカスタマイズできるようにするモジュール式およびプラグイン アーキテクチャを提供する、柔軟で拡張可能な PHP フレームワークです。この記事では、ブログ開発に Croogo フレームワークを使用する方法を紹介します。 Croogo フレームワークをインストールする Croogo フレームワークを使用してブログを開発する前に、Croogo フレームワークをインストールする必要があります。 Croogo フレームワークの最新バージョンを公式 Web サイトからダウンロードし、公式ドキュメントの指示に従ってインストールできます。ブログモジュールCをインストールする

See all articles