原生js實現雪花飄落效果

来源:http://www.cnblogs.com/heyujun-/archive/2017/04/15/6715763.html
-Advertisement-
Play Games

雪花飄落的效果實現步驟:1.使用setInterval定時器每800毫秒創建一個雪花;2.把每一個雪花作為參數傳進動態下落的方法中即可。 js實現代碼: 效果圖如下: 這樣雪花飄落的效果就做好了。有什麼不足的地方請指正! ...


雪花飄落的效果實現步驟:1.使用setInterval定時器每800毫秒創建一個雪花;2.把每一個雪花作為參數傳進動態下落的方法中即可。

<style>
    *{padding: 0;margin: 0;}
    body{
        background:#000;
        width: 100%;
        height: 100%;
        overflow:hidden;
    }
</style>
<div id="flame"></div>

js實現代碼:

<script>
    

    function Obj(){}  //創建一個對象

    /*為這個對象添加一個具有一個參數的原型方法*/
    Obj.prototype.draw=function(o){
        var speed=0;   //雪花每次下落的數值(10px)
        var startPosLeft=Math.ceil(Math.random()*document.documentElement.clientWidth);//設置雪花隨機的開始x值的大小
        o.style.opacity=(Math.ceil(Math.random()*3)+7)/10;  //設置透明度
        o.style.left=startPosLeft+'px';  
        o.style.color="#fff";
        o.style.fontSize=12+Math.ceil(Math.random()*14)+'px';
        setInterval(function(){
            //雪花下落的top值小魚屏幕的可視區域高時執行下列
            if(speed<document.documentElement.clientHeight){
                o.style.top=speed+'px';
                o.style.left=startPosLeft+Math.ceil(Math.random()*8)+'px';
                speed+=10;
            }
            else{
                o.style.display='none';
            }
        },400);
    }

    var flame=document.getElementById('flame');
 
    /*使用setInterval定時器每800毫秒創建一個雪花*/
    setInterval(function(){
        var odiv=document.createElement('div');  //創建div
        odiv.innerHTML="✽";   //div的內容
        odiv.style.position='absolute';  //div的絕對定位
        flame.appendChild(odiv);   //把創建好的div放進flame中
        var obj=new Obj();   //創建函數
        obj.draw(odiv);  //執行obj的draw方法
    },800);   

</script>

效果圖如下:

這樣雪花飄落的效果就做好了。有什麼不足的地方請指正!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 網頁佈局基礎 簡介 什麼是網頁佈局? 網頁佈局是網頁製作的基礎,使用DIV+CSS佈局網頁是基礎中的基礎。三種基本佈局方式:流式佈局,浮動佈局,絕對定位佈局。 W3C標準包括結構化標準語言,表現標準語言,行為標準語言,倡導結構,樣式,行為分離。 CSS中,存在三種定位機制:標準文檔流,浮動,絕對定位 ...
  • 上回書說道,JS中變數、運算符、分支結構、迴圈和嵌套迴圈等內容。本回就由本K給大伙嘮嘮JS中的BOM、DOM和事件。 一、“花心大蘿蔔”——BOM 1、震驚,FFF團為何對BOM舉起了火把——BOM簡介 BOM(Browser Object Model) 是指瀏覽器對象模型,在JS中BOM是個不折不 ...
  • 一個精美的網頁需要的樣式很多,在父級上設置的字體顏色或者大小,在其子元素中不一定全部相同,這時候要更改其中某一項的樣式怎麼辦呢。 很多新手朋友就不明白,會迷惑為什麼我使用class單獨命名了,重新設置了還是沒有變化,會考慮是不是格式錯了,是不是命名有問題,但是有沒有考慮過權重值呢,新手朋友對於權重值 ...
  • opacity透明在網頁製作中使用會很多,為了增加好看的效果,透明的樣式肯定是必不可少的。 記得之前做一個網頁,其中一個塊給了個30的高,背景半透明的黑色,上面有一排導航,導航字體的顏色也就成了灰黑色,本來是想做成白色字體,怎麼改都不行,以為是字體的ul層在背景塊的下麵,想用z-index把字體的層 ...
  • 通過JS實現banner圖的滾動主要是定時器的應用 先新建好banner圖的幾張圖片,最後一張與第一張用同一個,保證滾動的不間斷 改好樣式,需註意所有圖片要在同行顯示,否則不能向左滾動 聲明一個函數,為定時器函數,函數內通過switch結構執行,case的值通過聲明一個全局變數每次執行函數的時候使其 ...
  • DOM對象模型 【DOM樹節點】 DOM節點分為三大類:元素節點,文本節點,屬性節點: 文本節點,屬性節點為元素節點的兩個子節點; 通過getElment系列方法,可以去到元素節點; 【查看節點】 1.getElementById:通過id獲取唯一的節點;多個同名ID只會取到第一個; 2.etEle ...
  • 之前的某次番嗇看到油管上有這麼一個進度條,當時覺得挺好玩,一直想著做一個試試,剛纔弄了一下寫了一個不算太好看的簡陋版本,哈哈。 (本博客刷新會頭部會出現,因為並沒有真正的參與到瀏覽器載入是否完整這個渲染過程中來,所以只是一個表象,並不是說這個顯示完了就瀏覽器也載入完了所以資源。) ...
  • 一、簡介及安裝: gulp是前端開發過程中對代碼進行構建的工具,是自動化項目的構建利器;她不僅能對網站資源進行優化,而且在開發過程中很多重覆的任務能夠使用正確的工具自動完成;使用她,我們不僅可以很愉快的編寫代碼,而且大大提高我們的工作效率 gulp的優點:基於流的操作、任務化。 常用api:src ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...