源碼地址

創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、豐寧網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、html5、商城網(wǎng)站建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為豐寧等各大城市提供網(wǎng)站開發(fā)制作服務。

https://github.com/jingegebuguai/Cherry_Blossoms（求star）

開發(fā)原因

• 上課看到一位女生桌面背景是一課櫻花樹，頓時產(chǎn)生了一個讓櫻花可以在web頁面飛舞的想法，借此把這個插件獻送給那位女同學；
• 開發(fā)過焦點圖，輪轉(zhuǎn)圖，瀑布流等應用插件，但是這類型插件還是第一次做，那個啥興趣使然對吧；

開發(fā)工具

• Jquery+webstorm,無需額外配置任何環(huán)境，移動端無法使用

效果演示

為了更加顯眼，背景換成了黑色,gif圖有些卡頓，實際效果比較流暢

效果詳見Github

使用方法

• 在需要加入效果的頁面加入html代碼,位置最好放在body元素下第一個標簽

<div class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</div>

• 導入一下js代碼其中各變量可根據(jù)需要改變

$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成櫻花
     image_min:10,//花瓣最小寬度和高度
     image_max:50,//花瓣最大寬度和高度
     time_min:10000,//花瓣最快下墜時間
     time_max:20000,//花瓣最慢下墜時間
     interval:500//花瓣生成時間間隔
   })
 })

js插件

• IIFE（立即執(zhí)行匿名函數(shù)）
• $.extend(),擴展插件定義默認參數(shù)
• randomNum（）設置[m,n]類型隨機數(shù)

以上所述是小編給大家介紹的jQuery實現(xiàn)web頁面櫻花墜落的特效，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文名稱：jQuery實現(xiàn)web頁面櫻花墜落的特效
網(wǎng)站網(wǎng)址：http://chinadenli.net/article8/gsggip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、定制網(wǎng)站、企業(yè)網(wǎng)站制作、手機網(wǎng)站建設、外貿(mào)網(wǎng)站建設、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)