欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)web頁面櫻花墜落的特效

 更新時(shí)間：2017年06月01日 14:06:29   作者：惠惠_  
這篇文章主要介紹了jQuery實(shí)現(xiàn)web頁面櫻花墜落的特效,效果非常棒，需要的朋友可以參考下

源碼地址

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

開發(fā)原因

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

開發(fā)工具

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

效果演示

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

效果詳見Github

使用方法

  • 在需要加入效果的頁面加入html代碼,位置最好放在body元素下第一個(gè)標(biāo)簽
<div class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</div>
  • 導(dǎo)入一下js代碼其中各變量可根據(jù)需要改變
$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成櫻花
     image_min:10,//花瓣最小寬度和高度
     image_max:50,//花瓣最大寬度和高度
     time_min:10000,//花瓣最快下墜時(shí)間
     time_max:20000,//花瓣最慢下墜時(shí)間
     interval:500//花瓣生成時(shí)間間隔
   })
 })

js插件

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

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)web頁面櫻花墜落的特效，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論