從無到有寫乙個jQuery開源外掛程式

2021-07-11 13:44:19 字數 3444 閱讀 7913

女:來給我拍照給我拍照

男:已經拍了很多了

女:來,給我看看拍的怎麼樣

女:這張不錯,櫻花飄落的這種感覺好好哦,可惜櫻花在**上不動,不然會更美。

男:你用美圖秀秀不就行了嘛。

... 男陷入了沉默,似乎明白了剛才不該提那個建議

華麗的分割線

對,故事中的男就是我,我就是我 是顏色不一樣的煙火。哈哈~~~

作為一名"資深"工程師(ps:其實就一屌絲),生活中像這種狗血劇情還有很多,好像在外人看來,因為你是程式設計師,so,跟電腦相關的你就得全會。

因為是程式設計師,發生類似的狗血劇情(皆為親身經歷)

回到頂部

好了,趕緊開始正文吧,不然分割線都不夠用了,再割就割沒了。

這裡是技術部落格,咱只聊技術。既然答應了別人,就得開幹。

回到頂部

需要櫻花動的效果那就需要用到定位position,那麼多花瓣就需要用到js轉殖clone(),花瓣是動態的就需要用到定時器setinterval

回到頂部

好像差不多了吧? 這麼乙個效果其實並不難。如果再剖析下去的話,估計會有人說"作"了。

doctype html

>

<

html

xmlns

="">

<

head

>

<

title

>櫻花節

title

>

<

style

>

html, body

style

>

<

script

src=""

>

script

>

<

script

src="jquery.nagareboshi.js"

>

script

>

<

script

>

$(function

() );

})script

>

head

>

<

body

style

="background-color:black;"

>

body

>

html

>

html部分比較簡單,沒什麼特別需要說明的地方。非要說兩句的話,那就... 且行且珍惜吧~  

/*

* * jquery.nagareboshi

* ** @version 1 (3/31/2016)

* @author 頭頭哥

* @requires jquery

* * @params flakechar - 漂浮圖示樣式, 預設是雪花, 其它漂亮符號參考: ❥ღ❣♔♕♖♚♛♜☀☁☂☃☼☽☾♨❄❅❆★☆✦✪✫✿

* @params minsize - 預設size最小是10

* @params maxsize - 預設size最大是20

* @params newon - 出現新圖示的頻率,預設是500

* @params flakecolors - 預設的圖示顏色 , 預設是#ffffff

* @params durationmillis - 停止載入圖示的時間,預設是一直載入

* @example $.fn.nagareboshi(); */

; (function

($, window, document, undefined) ),

documentheight =$(document).height(),

documentwidth =$(document).width(),

defaults =,

//當給extend方法傳遞乙個以上的引數時,它會將所有引數物件合併到第乙個裡。同時,如果物件中有同名屬性時,合併的時候後面的會覆蓋前面的。

//所以如果傳遞進來的options引數有的值,將會覆蓋defaults物件裡對應的值

options =$.extend({}, defaults, options);

$flake.html(options.flakechar);

var interval = setinterval(function

() )

.animate(

,durationfall,

'linear',

function

() );

}, options.newon);

console.log(options.durationmillis);

if(options.durationmillis) , options.durationmillis);}};

})(jquery, window, document);

js部分講解:

1.為什麼**開始; (function ($, window, document, undefined) {是以乙個分號開始? 其實這個分號是用來充當自呼叫匿名函式的第一對括號與其他**定義的函式(乙個專案中可能會引入很多外掛程式)相連,避免其他人的**中沒有分號結尾而導致報錯。

比如:

像上面這段**就是典型的自呼叫匿名函式和其他外掛程式**沒有分號分隔的,大家有興趣可以試一試這段**執行起來會不會報錯?

ps: 這部分內容也是在劉哇勇的部落格中學習到的。

2.關於$.extend();在**注釋部分已經詳細說明了,在自己寫擴充套件外掛程式的時候,extend()出場率還是很高的。

3.利用sizeflake = options.minsize + math.random() * options.maxsize隨機設定每個轉殖出來的花瓣的大小

4.也沒什麼過多的講解的了,關於引數如何使用**中注釋部分也說的很清楚了。

為了保護個人隱私,演示效果圖裡已經將背景換成了黑色背景色,想用的可以自己在這改。

<

body

style

="background-color:black;"

>

src="" allowfullscreen="" frameborder="0" height="498" width="510">

src="" allowfullscreen="" frameborder="0" height="498" width="510">

從無到有 製作簡易編譯器(一)

從無到有 製作簡易編譯器 一 編譯原理是計算機專業大三或者大四的必修課程之一,許多學員都會對學生提出硬性或者軟性的製作簡易編譯器的要求。許多學生手足無措,別急,學長也是過來人,看完這個教程,保證你輕輕鬆鬆完成屬於你自己的編譯器。首先第一篇教程不會涉及具體的實現。在這種大工程之前,正確的模組劃分是極為...

寫在創業的路上 如何從無到有的打造乙個產品

寫在創業的路上 如何從無到有的打造乙個產品 編者按 各個高校裡,經常會有創新創業競賽,無論是學校支援,還是企業贊助,這都表明了乙個趨勢 創業。但是創業的路上艱辛無比,想創業的同學們需要乙個方向性指導,以避免走太多的彎路,本文作者通過自身實踐經歷給出了創業路上最初的產品設計以及團隊發展的經驗總結,編者...

寫乙個Jquery字型外掛程式

在製作專案的過程中,為了給登入使用者提醒功能,需要將當前的提示資訊字型顏色變換幾次,以達到引起使用者注意的目的.具體做法就是當滑鼠移動過提醒資訊的時候,當前的字型顏色能夠每隔50ms變換一次.非plugin版本的製作方法 初次接觸到這個需求的時候,很多人都想到利用settimeout來做,我也不例外...