JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法
冬が到来し、多くのブログ スペースに雪の結晶のエフェクトが追加されたので、そのエフェクトがどのように実装されているかを見に行きました。エフェクトコードがいくつかあるので、困っている友達に譲って試してもらいました。
雪の結晶の全体像:
エフェクトコード 1
<script type="text/javascript" language="javascript">
(function() {
function k(a, b, c) {
if (a.addEventListener) a.addEventListener(b, c, false);
else a.attachEvent && a.attachEvent("on" + b, c)
}
function g(a) {
if (typeof window.onload != "function") window.onload = a;
else {
var b = window.onload;
window.onload = function() {
b();
a()
}
}
}
function h() {
var a = {};
for (type in {
Top: "",
Left: ""
}) {
var b = type == "Top" ? "Y": "X";
if (typeof window["page" + b + "Offset"] != "undefined")
a[type.toLowerCase()] = window["page" + b + "Offset"];
else {
b = document.documentElement.clientHeight ? document.documentElement: document.body;
a[type.toLowerCase()] = b["scroll" + type]
}
}
return a
}
function l() {
var a = document.body,
b;
if (window.innerHeight) b = window.innerHeight;
else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
else if (a && a.clientHeight) b = a.clientHeight;
return b
}
function i(a) {
this.parent = document.body;
this.createEl(this.parent, a);
this.size = Math.random() * 5 + 5;
this.el.style.width = Math.round(this.size) + "px";
this.el.style.height = Math.round(this.size) + "px";
this.maxLeft = document.body.offsetWidth - this.size;
this.maxTop = document.body.offsetHeight - this.size;
this.left = Math.random() * this.maxLeft;
this.top = h().top + 1;
this.angle = 1.4 + 0.2 * Math.random();
this.minAngle = 1.4;
this.maxAngle = 1.6;
this.angleDelta = 0.01 * Math.random();
this.speed = 2 + Math.random()
}
var j = false;
g(function() {
j = true
});
var f = true;
window.createSnow = function(a, b) {
if (j) {
var c = [],
m = setInterval(function() {
f && b > c.length && Math.random()
< b * 0.0025 && c.push(new i(a)); ! f && !c.length && clearInterval(m);
for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
c[d].remove();
c[d] = null;
c.splice(d, 1)
} else {
c[d].move();
c[d].draw()
}
},
40);
k(window, "scroll",
function() {
for (var e = c.length - 1; e >= 0; e--) c[e].draw()
})
} else g(function() {
createSnow(a, b)
})
};
window.removeSnow = function() {
f = false
};
i.prototype = {
createEl: function(a, b) {
this.el = document.createElement("img");
this.el.setAttribute
("src", b + "雪花图片的绝对链接地址");
this.el.style.position = "absolute";
this.el.style.display = "block";
this.el.style.zIndex = "99999";
this.parent.appendChild(this.el)
},
move: function() {
if (this.angle < this.minAngle || this.angle > this.maxAngle)
this.angleDelta = -this.angleDelta;
this.angle += this.angleDelta;
this.left += this.speed * Math.cos(this.angle * Math.PI);
this.top -= this.speed * Math.sin(this.angle * Math.PI);
if (this.left < 0) this.left = this.maxLeft;
else if (this.left > this.maxLeft) this.left = 0
},
draw: function() {
this.el.style.top = Math.round(this.top) + "px";
this.el.style.left = Math.round(this.left) + "px"
},
remove: function() {
this.parent.removeChild(this.el);
this.parent = this.el = null
}
}
})();
createSnow("", 40);
</script>記事ページのみを表示したい場合は、上記のコードをテーマのヘッダーまたはフッター ファイルに直接コピーして貼り付け、single に直接追加します。 以下に、雪の結晶の写真 (必要な素材) を皆さんに提供します。 
小さな写真: ブログの現在のテーマにアップロードし、コード内のリンクを写真の場所に変更する必要があります。効果はこのページにある通りです
エフェクトコード 2:
<html>
<head>
<script>
function start(){
var array=new Array();
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext("2d");
for(var i=0;i<50;i++){
var ShowJS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法=new showJS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法();
array.push(ShowJS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法);
}
time=setInterval(function (){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].draw(context);
}
},500);
}
function showJS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法(){
var y=parseInt(Math.random()*50)*10;
var x=parseInt(Math.random()*80)*10;
this.draw=function(context){
context.font="50px Calibri";
context.fillText("*",x,y);
}
this.move=function(){
y+=20;
if(y>600){
y=0;
}
}
}
</script>
</head>
<body>
<input type="button" value="start" onclick="start()" />
<br/>
<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
</body>
</html>この効果は次のように実証されます (見た目が悪いので推奨されません):
エフェクトコード 3
実際、Let it Snow プラグインを使用して、WordPress ブログに降る雪の結晶を実装することもできます。
let it Snow プラグインの使用方法については、ここでは詳しく説明しません。他のプラグインのインストールと何ら変わりはありません。let it Snow フォルダー内のファイルを直接ダウンロードしてアップロードすることができます。 /wp-content/plugins/ ディレクトリに移動し、このプラグインを有効にするには、WordPress 管理パネルのメニューでプラグインを設定するだけです。または、バック プラグイン ライブラリを直接検索して見つけることもできます。
let it Snow 公式ウェブサイト: クリックしてアクセス
エフェクトコード 4
インターネット上で非常に強力な SnowStorm プラグインを見つけました。 Google で let it Snow と検索すると、雪と霜のエフェクトのコードが生成されるようです。子供靴が良いと思ったら、公式サイトにアクセスしてチェックしてみてください。
インターネット上で単純なランダムな雪の結晶が落ちるエフェクト コードを見つけましたので、共有します (このエフェクトは純粋なコードで書かれています。雪の結晶は * です):
内部の関数のいくつかを簡単に説明しましょう:
1. letItSnow()
雪が降っています（この文はまだ役に立ちません）。次に、createSnow を呼び出して雪の結晶を生成します。
2.createSnow()
雪の結晶を生成します。各雪の結晶は タグで、雪の結晶をシミュレートするには「*」を入力します (Google のコピーはダウンロードできません。実際にはスペースとして表示されます。とても驚きました)。 )、それを大きなコンテナに入れます。JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box と呼ばれるコンテナで、生成された個体は iArray にプッシュされて収集されます。スノーフレークは、JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box に基づいた絶対配置方法を使用し、上部は 0px、左側は Math.random()*window.screen.width を使用するため、スノーフレークは画面幅でランダムに生成されます。
色を使用して雪片の色の深さを制御し、0 ～ 200 の範囲で被写界深度を作成します
fontSize を使用して雪の結晶のサイズを 10 ピクセルから 15 ピクセルの範囲で制御します
Snowflake Falling の呼び出し間隔を時間を 40 ミリ秒から 50 ミリ秒の範囲で制御します
SnowInterval を使用して、雪の結晶の間隔を 500 ミリ秒から 1000 ミリ秒の範囲で制御します
その後、再帰的に自分自身を呼び出し、雪の結晶を継続的に生成します。
3.fallDown()
名前の通り、雪の結晶を降らせるものです。落下速度は2px、つまり垂直に2pxずつ落ちます。この時点でテストを実行し、スノーフレークが一定の高さ、つまり親コンテナーよりも高い位置まで下がった場合は、それを削除します。そうしないと、スノーフレークが多すぎるとブラウザーの動作が遅くなります。とにかく、overflow:hidden によって表示から削除されました。次に、垂直に降下しながら WindBlow 関数を呼び出して、雪の結晶をより芸術的に降らせます。
4.windBlow()
風が吹いているような名前ですが、実際は風が吹いているエフェクトであり（これはさらに無駄です。笑）、 Math.sin() を使用して空中に浮かぶ雪の結晶のエフェクトを生成し、雪の結晶が単調な直線にならずに、蛇行状に落ちるように、連続性が良くなり、より快適に見えるようにします。
function letItSnow(){
var JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box=document.getElementById("JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box");
var iArray=new Array();
createSnow(JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box,iArray);
}
function fallDown(temObj,iArray){
var speed=2;
var top=parseInt(temObj.style.top);
if(top>510){//当到超过高度时候就删了它，减轻浏览器压力
for(var i=0;i<iArray.length;i++){
if(temObj==iArray[i]){
iArray.splice(i,1);
var JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box=document.getElementById("JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box");
JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box.removeChild(temObj);
return false;
}
}
}
temObj.style.top=top+speed+"px";
var wind=windBlow(temObj,top);
temObj.style.left=parseInt(temObj.style.left)+wind*2+"px";
}
function windBlow(temObj,top){
if(parseInt(Math.random())%2==1)
return Math.sin(top/16);
else return Math.cos(top/16);
}
function createSnow(JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box,iArray){
var temObj=document.createElement("i");
var temText=document.createTextNode("*");
temObj.appendChild(temText);
temObj.style.left=parseInt(Math.random()*window.screen.width)+"px";
temObj.style.top="0px";
var temNum=parseInt(Math.random()*200);
temObj.style.color="#"+temNum.toString(16)+temNum.toString(16)+temNum.toString(16);
iArray.push(temObj);
JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box.appendChild(temObj);
var temNum=0;
while(temNum<10){
temNum=parseInt(Math.random()*15);
}
temObj.style.fontSize=temNum+"px";
var time=0;
while(time<40){
time=parseInt(Math.random()*50);
}
temObj.timer=setInterval(function(){
fallDown(temObj,iArray);
},time);
var JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Interval=0;
while(JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Interval<500){
JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Interval=parseInt(Math.random()*1000);
}
var createTimer=setTimeout(function(){
createSnow(JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Box,iArray);
clearTimeout(createTimer);
},JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法Interval);
}デモのアドレス: http://demo.jb51.net/js/2014/JS コードとプラグインを使用して wordpress_javascript スキルで雪の結晶の降る効果を実現する 4 つの方法/
さて、これで 4 つのエフェクト コードは終わりです。困っている友達を助けることができれば幸いです。ご質問がございましたら、以下にメッセージを残してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7396
15
1630
14
1358
52
1268
25
1217
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
Ajaxを使用して動的にボックスコンテンツをロードします
Mar 06, 2025 am 01:07 AM
このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。 重要な概念： ajaxとjquery
10 jQueryの楽しみとゲームプラグイン
Mar 08, 2025 am 12:42 AM
10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム
JavaScript用のクッキーレスセッションライブラリを作成する方法
Mar 06, 2025 am 01:18 AM
このJavaScriptライブラリは、Cookieに依存せずにセッションデータを管理するためにWindow.nameプロパティを活用します。 ブラウザ全体でセッション変数を保存および取得するための堅牢なソリューションを提供します。 ライブラリは、セッションの3つのコア方法を提供します
jQuery Parallaxチュートリアル - アニメーションヘッダーの背景
Mar 08, 2025 am 12:39 AM
このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください
