js實現雪花效果(超簡單)

阿新 • • 發佈：2018-12-06

使用js實現雪花飄落效果，話不多說直接上程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snow</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            background 
: black;
        }
        .snow{
            background: white;
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
    </style>

</head>
<body>
    <script>
        //獲取螢幕寬高
        var windowWidth = window.screen.width;
        var 
 windowHeight = window.screen.height;

        //建立雪花
        function createSnow(){
            var left = 0;
            var top = 0;

            //定義一個初始化隨機數,使雪花在螢幕中
            var left_random = Math.random() * windowWidth;
            var top_random = Math.random()* windowHeight;
            var div = document 
.createElement('div');
            div.className = 'snow';
            div.style.transform = 'scale('+(Math.random())+')'

            document.body.appendChild(div);

            //雪花飄落
            setInterval(function () {

                div.style.left = left_random + left +'px';
                div.style.top = top_random + top +'px'
                left += 0.2;
                top += 0.2;

                //如果雪花跑到螢幕外面了,讓雪花重新返回螢幕頂部
                if(left_random + left >= windowWidth){
                    left_random = Math.random();
                    left = 0;
                }

                if(top_random + top >= windowHeight){
                    top_random = Math.random();
                    top = 0;
                }
            },10)

        }
        for(var i = 0 ; i < 200 ; i++){
            createSnow()
        }
    </script>
</body>
</html>

實現邏輯其實很簡單，動態建立若干個div設定其樣式變成雪花，通過setInterval定時器控制雪花移動，當雪花跑到螢幕外面重新讓雪花的left或者top為0，使雪花重新回到最左或者最上面的位置，從而實現。

效果預覽：

js實現雪花效果(超簡單)

使用js實現雪花飄落效果，話不多說直接上程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>snow</title>

JS實現雪花飄落特效效果

1、概述：以任意圖片作為背景，在背景上新增雪花下落的特效效果，此處使用隨機顏色、隨機大小的彩色雪花實現。 2、效果實現功能：（1）雪花隨機出現並隨機消失；（2）雪花出現時大小隨機；（3）雪花顏色隨機；（4）雪花顏色逐漸變淡並消失；（5）雪花消失後刪除其物件

使用laravel 實現分頁效果超簡單

每頁展示5條資料控制器 class indexCo extends Controller { public function cc () { $lists = UserAli:

原生JS實現放大鏡效果

use 瀏覽器賦值 uri 字符串 () solid adding clas 效果： 1、鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、鼠標移動時右邊的大圖片也會局部移動放大鏡的關鍵原理：鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相

js實現放大鏡效果

設置信息鼠標放大 ack 視口 seo bim wid html部分 <div id="box"> <img width="100%" height="100%" src="images/1.png" alt="#">

js 實現彈性運動的簡單應用----導航欄中彈性

UNC window elements enter ++ 導航欄 -h meta timer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

js實現滾動效果

ul li border float ack col 原理 tag absolute func 　　滾動效果通過setInterval定時函數去實現的，setInterval定時讓ul每過一段時間就移動，移動其實是left的值在變大，讓ul移動的必須讓這個div是絕對定位的

[Leetcode] 28. 實現strStr() java (超簡單高效方法）

實現 strStr() 函式。給定一個 haystack 字串和一個 needle 字串，在 haystack 字串中找出 needle 字串出現的第一個位置 (從0開始)。如果不存在，則返回 -1。示例 1: 輸入: hayst

原生js實現select效果

前言在使用select時候原生預設樣式很難修改特別是option的樣式和滑鼠經過option時候的樣式改變很難覆蓋，能力不足尚未實現，暫且記錄後續解決，現自己寫一個選擇的效果 DOM <div class="selectBox"> <div class="se

用js實現打字機效果

1.難得有點時間，回憶下古詩文，順便練習下js，實現下打字機效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打字機</t

Js實現時鐘效果

圖片在文末 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>時鐘</title> <style type="text/c

js實現打字效果

<!DOCTYPE html> <html> <head> <meta charset='utf-8'>

用js實現開花效果

<html> <head> <title>JavaScript實現很漂亮的開花特效 - www.unimagical.com</title> </head> <body> <script l

JS實現手風琴效果

JS實現手風琴效果，這個主要是點選時內容節點或者你想要的一個節點隱藏或顯示，但是高度要為0；所以考慮用display或者height屬性值切換，不能用opacity或者visibility屬性來確定 1 <!doctype html> 2

js實現雪花飄落特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xm

利用js實現二級聯動的簡單例項

此例項是一個簡單的二級聯動，第一個列表中的值為固定的，第二個列表中的值隨著第一個列表值的變化而變化，即第一個列表影響第二個列表。實現思路：先寫兩個<select>標籤，用name或id來區分；寫一個二維陣列來存放資訊；在一級選單中使用onchange()事件來動態

div+js實現iframe效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

canvas實現雪花效果

function SnowAnimate(config){ this.defaultConfig = { canvasId:'mycanvas',//canvas id

原生JS實現走馬燈效果

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin:0; paddi

web複習(三):js實現公告欄效果,間歇性滾動展示

使用js實現:公告欄間歇性展示效果 :思想,使用js操作,ul的scrollTop,並配合setTimeout和setInterval實現迴圈間歇滾動程式碼:如下: <!DOCTYPE

js實現雪花效果(超簡單)

使用js實現雪花飄落效果，話不多說直接上程式碼

實現邏輯其實很簡單，動態建立若干個div設定其樣式變成雪花，通過setInterval定時器控制雪花移動，當雪花跑到螢幕外面重新讓雪花的left或者top為0，使雪花重新回到最左或者最上面的位置，從而實現。

效果預覽：

相關推薦