js+css實現(xiàn)紅包雨效果
更新時間:2018年07月12日 08:41:15 作者:簡若澈
這篇文章主要為大家詳細介紹了js+css實現(xiàn)紅包雨效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)紅包雨展示的具體代碼,供大家參考,具體內(nèi)容如下
1.html部分
紅包的樣子,先寫一個模版在頁面上
<div class="hide"> <div class="RedPackage__Box js-RedPackageBox" data-txt> <img src="./images/redPackage.png" alt=""> </div> </div>
顯示紅包的容器
<div class="RedPackage__Main js-RedPackage"></div>
2.js部分
const $redPackage = $('.js-RedPackage'); const $redPackageBox = $('.js-RedPackageBox'); const redPackageWidth = $redPackage.width(); const redPackageBoxWidth = $redPackageBox.width(); //因為紅包有角度旋轉(zhuǎn)的問題,所以需要計算一下,避免旋轉(zhuǎn)之后溢出屏幕 const basePadding = 30; const maxLeftPx = redPackageWidth - redPackageBoxWidth - basePadding * 2; //每一個紅包都是相對于父元素定位,通過z-index來設置層級 let zIndex = 1; function bindEvent() { $redPackage.on('click', '.js-RedPackageBox', function() { //拿到每個紅包的數(shù)據(jù) const data = $(this).data('txt'); } } //生成mix-max的隨機數(shù) function getRandom(min, max) { return Math.round(Math.random() * (max - min) + min); } //紅包的移動 function redPackageBoxSpeed($el, time) { $el.animate( { top: '130%', }, time * 1000, function() { $el.remove(); } ); } //生成紅包 function createRedPackageNode() { const $newNode = $redPackageBox.clone(true); //紅包攜帶的數(shù)據(jù) const txt = keyList.shift(); keyList.push(txt); $newNode.attr('data-txt', JSON.stringify(txt)); //紅包隨機旋轉(zhuǎn)-30~30度 $newNode.css({ 'z-index': zIndex++, left: getRandom(basePadding, maxLeftPx) + 'px', transform: 'rotate(' + getRandom(-30, 30) + 'deg)', }); $redPackage.append($newNode); redPackageBoxSpeed($newNode, 4); } //紅包的動態(tài)創(chuàng)建 function createRedPackageRain() { setInterval(() => { createRedPackageNode(); }, 300); } function ready() { bindEvent(); createRedPackageRain(); } ready();
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
TypeScript里string和String的區(qū)別
這篇文章主要介紹了TypeScript里string和String的區(qū)別,真的不止是大小寫的區(qū)別,string表示原生類型,而String表示對象,下文更多詳細內(nèi)容需要的小伙伴可以參考一下2022-03-03JavaScript的Object.defineProperty詳解
本篇文章給大家詳細講述了JavaScript的Object.defineProperty的相關知識點內(nèi)容,有興趣的朋友參考學習下。2018-07-07axios請求設置responseType為'blob'或'arraybuffer&apo
這篇文章主要給大家介紹了關于axios請求設置responseType為'blob'或'arraybuffer'下載時如何正確處理返回值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01javascript中Promise的三種狀態(tài)示例詳解
這篇文章主要給大家通過講解和實踐,詳細介紹了Promise對象的三種狀態(tài):pending(待定)、fullfilled(已兌現(xiàn))、rejected(已拒絕),并通過日志查看,展示了Promise狀態(tài)的改變順序,幫助讀者更好的理解和應用Promise,需要的朋友可以參考下2024-10-10