隨機字元變換效果的jQuery外掛程式開發教程

在這篇快速的jquery外掛程式開發教程中，我們將建立乙個jquery外掛程式用來隨機排序顯示任何乙個dom元素的文字內容 -這將會是乙個非常有趣的效果，可以用在標題，logo及其幻燈效果中。

那麼第一部呢，我們將開發jquery外掛程式的基本架構。我們將把**放入乙個自執行的方法中，並且擴充套件$.fn.

assets/js/jquery.shuffleletters.js

(function($),prop)
return this.each(function());
};// a helper function
function randomchar(type)
})(jquery);

下一步我們將關注與randomchar()方法。它將會接受乙個型別引數（lowerletter, upperletter或者symbol），並且返回乙個隨機字元。

function randomchar(type)
else if (type == "upperletter")
else if (type == "symbol")*&^%$#'\"";
}var arr = pool.split('');
return arr[math.floor(math.random()*arr.length)];
}

我們本應該使用乙個簡單的字元池來儲存所有的字元，但是這樣會有更好效果。

現在我們來書寫外掛程式的body部分：

$.fn.shuffleletters = function(prop),prop)
return this.each(function()
else 
// the types array holds the type for each character;
// letters holds the positions of non-space characters;
var types = ,
letters = ;
// looping through all the chars of the string
for(var i=0;ilen)
// all the work gets done here
for(i=math.max(start,0); i < len; i++)
else 
}el.text(strcopy.join(""));
settimeout(function(),1000/options.fps);
})(-options.step);
});};

這個外掛程式將可以接受被呼叫的dom元素的內容，或者當作乙個引數傳入的物件的text屬性。然後它分割字串到字元，並且決定使用的型別。這個 shuffle功能使用settimeout()來呼叫自己並且隨機生成字串，更新dom元素。如果你不清楚settimeout()的使用，可以參考這篇文章：，呼叫setimeout方法可以幫助你按特定時間間隔執行某些操作。

二 jquery學習 jquery的效果

jquery的基本效果包括隱藏顯示切換，滑動，淡入淡出，以及動畫等等。一隱藏與顯示通過呼叫hide 和show 方法實現。語法如下 selector hide speed,callback selector show speed,callback 可選的 speed 引數規定隱藏顯示的速度...

jQuery的動畫效果

一 show 方法和hide 方法 1.show 與hide show 根據hide 方法記住的display屬性值來顯示元素。hide 將該元素的display樣式改為 none 用來隱藏元素 2.引數讓元素動起來單純的呼叫show 和hide 相當於css display none block...

jQuery的動態效果效果演示

jquery做動態效果，可以使用animate函式，animate params duration easing callback 用於建立自定義動畫的函式。這個函式的關鍵在於指定動畫形式及結果樣式屬性物件。這個物件中每個屬性都表示乙個可以變化的樣式屬性如 height top 或 opacity...

隨機字元變換效果的jQuery外掛程式開發教程

二 jquery學習 jquery的效果

jQuery的動畫效果

jQuery的動態效果效果演示

相關推薦