ホームページ > 記事 > ウェブフロントエンド > jQueryでWebページに桜降る特殊効果のサンプルコードを実装
jQueryでWebページに桜降る特殊効果のサンプルコードを実装
- 小云云オリジナル
- 2018-01-10 10:56:024754ブラウズ
この記事では、Web ページ上で桜の花びらを実現するための jQuery の特殊効果を主に紹介します。この効果が必要な方はぜひ参考にしてください。
開発理由
-
授業中に女の子のデスクトップ背景に桜の木が描かれているのを見て、すぐにWebページに桜を飛ばしたいというアイデアを思いつき、このプラグインを専用にしました。そのクラスメートの女子；
フォーカスチャート、カルーセルチャート、ウォーターフォールフローなどのアプリケーションプラグインを開発したことがありますが、この種のプラグインを開発するのは初めてなので、ただ興味があるだけですよね?
開発ツール
Jquery+webstorm、追加の必要はありません任意の環境を設定します、モバイル端末は使用できません
効果のデモ
より目立つために、背景を黒に変更しています、 GIF画像は少し遅れていますが、実際のエフェクトは比較的スムーズです
エフェクトの詳細についてはGithubを参照してください
使用方法
エフェクトを追加する必要があるページにHTMLコードを追加するのが最善です。 body要素の下の最初のタグに配置します
<p class="cherry"> <img id="yinghua" src="../image/yinghua.png" alt="" > </p>
jsコードをインポートし、必要に応じて各変数を変更できます
$(function(){
$('.cherry').Cherry_Blossoms({
is_Cherry:true,//是否生成樱花
image_min:10,//花瓣最小宽度和高度
image_max:50,//花瓣最大宽度和高度
time_min:10000,//花瓣最快下坠时间
time_max:20000,//花瓣最慢下坠时间
interval:500//花瓣生成时间间隔
})
})
jsプラグイン
-
IIFE (匿名関数の即時実行) )
$.extend()、拡張プラグインはデフォルトパラメータを定義します
randomNum() は [m,n] 型の乱数を設定します
関連する推奨事項:
JavaScript はパーソナライズされたナビゲーション バーを実装します特殊効果
以上がjQueryでWebページに桜降る特殊効果のサンプルコードを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。