雪が降っています。JavaScript で雪の結晶が踊ります_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

雪が降っています。JavaScript で雪の結晶が踊ります_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

この記事の例では、参考のために雪片飛行エフェクトの JavaScript 実装を共有します。具体的な内容は次のとおりです。

原則:

1. js で動的に DIV を作成し、CLASS クラスを指定してさまざまな背景画像スタイルを設定し、さまざまなスノーフレーク効果を表示します。

2. js は作成した DIV を取得し、その上部の属性値を変更します。ドロップの高さが画面の高さより大きい場合は、モバイル div を削除します。

3. 完璧ではないと思われる場合は、スプレーしないでください

エフェクトのプレビュー:

http://wjf444128852.github.io/demo02/snow/index.html

HTML コード:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>雪花飞舞</title>
 <link rel="stylesheet" href="css/index.css">
 <script src="js/move.js"></script>
</head>
<body>
 <div class="snow_parent" id="js_sonw">
  
 </div>
</body>
</html>

ログイン後にコピー

CSS コード

*{
 margin:0;
 padding:0;
 list-style: none;
 border: none;
}
body{
 width: 100%;
 height:600px;
 background:#000;
}
.snow_parent{
 position: relative;
 width: 100%;
 height:100%;
 overflow: hidden;
 margin: 0 auto;
}
.snow_parent div.parent{
 background-image: url(../img/snow.png);
 float: left;
 -webkit-transform: scale(.1);
 -moz-transform: scale(.1);
 -o-transform: scale(.1);
 -ms-transform: scale(.1);
 transform: scale(.1);
 position: absolute;
}
.snow_one{
 width: 180px;
 height: 180px;
 background-position:0 0;
 background-repeat: no-repeat;
 left:-70px;
 top: -95px;
}
.snow_two{
 width: 140px;
 height: 140px;
 background-position:-220px -18px;
 left:-30px;
 top: -75px;
}
.snow_three{
 width:150px;
 height: 150px;
 background-position:-400px -15px;
 left:-20px;
 top: -80px;
}
.snow_four{
 width: 160px;
 height: 160px;
 background-position:-10px -206px; 
}
.snow_four{
 left:-10px;
 top: -85px;
}

ログイン後にコピー

JS コード:

/*
 creatBy jiucheng 2016-4-24
*/ 
window.onload=function(){
 init();
}
// 创建DIV
function creatDiv(){
 // 创建DIV并追加到父元素
 var snowDiv=document.createElement("div");
 document.getElementById("js_sonw").appendChild(snowDiv);
 // 让创建DIV的class为随机，显示不同的雪花
 var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"];
 var index=Math.floor(Math.random()*whatName.length);
 snowDiv.className=whatName[index];
 // 获取该DIV的left属性值(随机的)并赋值给创建的DIV
 var whatLeft=getLeft()+'px';
 snowDiv.style.left=whatLeft;
 return snowDiv;
}
// 获取随机left属性值
function getLeft(){
 // 获取该DIV的最大left属性值即父元素的宽度
 var eleParent=document.getElementById("js_sonw");
 // 获取父元素的所有style样式
 var style=window.getComputedStyle(eleParent);
 // CSS中的left是负数这里得减去下
 var maxWidth=parseInt(style.width)+70;
 // 让创建的DIV的left为随机值
 var randomLeft=Math.floor(Math.random()*maxWidth);
 return randomLeft;
}
// 让其向下移动
function moveDown(){
 // 获取移动对象
 var moveElem=creatDiv();
 // 获取移动对象的所有style属性值
 var eleStyle=window.getComputedStyle(moveElem);
 // 获取它的top属性值
 var eleTop=parseInt(eleStyle.top);
 // 设置定时器动态改变移动对象的top属性值
 var t=setInterval(function(){
  eleTop++;
  // 把新的top值付给移动对象
  moveElem.style.top=eleTop+"px";
  // 当下落到屏幕的高度后停止定时器并把该移动对象从父元素删除
  if(eleTop>=window.innerHeight){  
   clearInterval(t);
   document.getElementById("js_sonw").removeChild(moveElem);
  }  
 },10);//下落速度没10毫秒下落1px
}
function init(){
 // 动态获取并设置body的高度
 document.body.style.height=window.innerHeight+"px";
 // 每500毫秒创建一个移动对象并执行移动函数
 var t=setInterval(function(){
  moveDown();
 },100);
}

ログイン後にコピー

以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7405

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

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

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景 Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。更新されたプラグインは、jQuery 1.6.4以降で動作します。ダウンロードしてください

Matter.jsを始めましょう：はじめに Mar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、